css3新增加的一些属性

1、文本阴影属性:
text-shadow: x轴位置 Y轴位置 阴影大小 阴影颜色
注:如果想添加多个阴影 每一组阴影以逗号分隔 语法:
text-shadow:-13px -1px 0px #6f3c3c, -32px 7px 19px grey
2、 盒子阴影:
box-shadow: x y 阴影的模糊度 阴影扩散的大小 颜色 内阴影(inset 可选)
语法:box-shadow:10px 10px 10px 20px gray inset;(inset一般不添加)
添加多阴影:以逗号分隔的形式添加多阴影

3、文本换行:
word-wrap:break-word:
功能:尝试把长单词换到下一行显示,如果在下一行仍然有超出的情况下,自动断句。
word-break:break-all;
功能:粗暴的断句。只要到头就换行

4、字体图标 让小图标以字体形式显示:
1、在iconfont上面下载好选好的小图标,添加到项目,并放到站点里
2、引入下载下来的 iconfont.css

3、在要添加图标的地方加一个标签,给i命名:iconfont,然后再命名下 载的对应图标的名字

注:要给图标设置大小,要注意权重。

5、背景属性:
1、background-origin:背景图的起始位置
padding-box; 默认值(padding区域开始,左上角)
border-box; 从边框后面开始
content-box; 从内容区域开始
2、background-clip:; 背景的裁切(只显示哪个区域的背景)
border-box:; 默认值
padding-box:; 显示paddi区域
content-box:; 显示内容区域
3、background-size:; 控制背景图的大小
属性值:宽度 高度
属性值的数值:
10px 10px
100% 100%
cover 按照背景图的比例放大到全部平铺在元素后面则停止
contain 按照比例放大,当宽或者高,达到容器最高则停止
多背景图的设置:
background:url() no-repeat,url() no-repeat,url()

6、图片边框:把一张图片,当作一个边框进行显示
border-image:; 一般都用简写
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移(不加单位)。[把图片切割成九宫格]
border-image-repeat 图像边框是否应平铺(repeat)、铺满(round)或拉伸(stretch)
border-image-outset 边框向外偏移,就是边框的放大,基本不用。
简写形式:
border-image:url(./images/borderbg.jpg) 30 30 round;

7、圆角:
border-radius:; 数值就是圆的半径
一个值:四周圆角
两个值:左上角及右下角 右上角及左下角
三个值:左上角 右上角及左下角 右下角
四个值:从左上角开始 顺时针设置。(左上 右上 右下 左下)
分垂直半径和水平半径:(也可以分别设置水平和垂直半径)
border-radius: 水平半径/垂直半径

8、宽width新增的属性值:
fill-available 合理分配有效剩余空间(加padding值不增加度)
fit-content 找子元素内容的宽度。按照子元素的宽度进行置
max-content 找子元素最大的宽度
min-content 找子元素最小的宽度

9、 alc计算(加减乘除都可以计算)
可以做几栏自适应布局:width:calc(100% - 200px)
10、css3事件属性:
pointer-events:none;
阻止各种按钮(button\a)的功能,添加了就点不动
穿透遮罩层:按钮在遮罩下面,给遮罩层添加,就可以点到按钮

发布了21 篇原创文章 · 获赞 0 · 访问量 209

猜你喜欢

转载自blog.csdn.net/weixin_46579411/article/details/105497089