CSS样式整理

这篇博客详细介绍了CSS中的关键样式特性,包括如何设置元素的阴影效果,边框样式,创建线性和对角渐变,实现过渡动画,以及如何将内容分布到多列。同时,展示了如何使用overflow属性来隐藏溢出内容并添加省略号。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >



学习目标:

css样式整理,现在并不全,以后会慢慢补全的




学习内容:

1.css阴影

  样式:   box-shadow: 10px 10px 5px #888888;


 box-shadow: 10px(X轴偏移[可负])  10px(y轴偏移[可负])   5px(模糊度)  #888888(颜色);
                    
    h-shadow	  必需的。水平阴影的位置。允许负值

    v-shadow	必需的。垂直阴影的位置。允许负值

    blur	可选。模糊距离

    spread	可选。阴影的大小

    color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表

    inset	可选。从外层的阴影(开始时)改变阴影内侧阴影

2.css边框

 border:5px solid red;

单独设个边

    border-top-style:dotted;

    border-right-style:solid;

    border-bottom-style:dotted;

    border-left-style:solid;
线形

例:border-top-style:dotted;

  dotted: 定义一个点线边框

  dashed: 定义一个虚线边框

  solid: 定义实线边框

  double: 定义两个边框。 两个边框的宽度和 border-width 的值相同

  groove: 定义3D沟槽边框。效果取决于边框的颜色值

  ridge: 定义3D脊边框。效果取决于边框的颜色值

  inset:定义一个3D的嵌入边框。效果取决于边框的颜色值

  outset: 定义一个3D突出边框。 效果取决于边框的颜色值

3.渐变

(1).线性渐变

线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

background: linear-gradient(direction(方向), color(第一种颜色), color(第二种颜色), ...)

  background: linear-gradient(to right, red , yellow);(从左到右)

(2)渐变对角

 background: linear-gradient(to bottom right, red, yellow);(左上到右下)

写对角的方向

4.css过渡

hover:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 

<style> 
div
{
	width:50px;
	height:50px;
	background:green;
	transition:width 3s;
	-webkit-transition:width 3s; 
}

div:hover
{
	width:300px;
}
</style>
</head>
<body>

<div></div>

<p>鼠标移动到 div 元素上,查看过渡效果。</p>

</body>
</html>

5.css多列

样式:

(1)将 <div> 元素中的文本分为 3 列

    div {
        -webkit-column-count: 3;
        -moz-column-count: 3; 
        column-count: 3;
    }

(2)多列中列与列间的间隙

    div {
        -webkit-column-gap: 60px; 
        -moz-column-gap: 50px; 
        column-gap: 40px;
    }

(3)column-rule-style 属性指定了列与列间的边框样式

    div {
        -webkit-column-rule-style: solid;
        -moz-column-rule-style: solid;
        column-rule-style: solid;
    }


column-count	指定元素应该被分割的列数。

column-fill	指定如何填充列

column-gap	指定列与列之间的间隙

column-rule	所有 column-rule-* 属性的简写

column-rule-color	指定两列间边框的颜色

column-rule-style	指定两列间边框的样式

column-rule-width	指定两列间边框的厚度

column-span	指定元素要跨越多少列

column-width	指定列的宽度

columns	column-width 与 column-count 的简写属性。

6.溢出隐藏

   overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值