CSS3边框

发布时间：2023-09-06 01:52责任编辑：苏小强关键词：CSS

一、盒子边框

1、盒子圆角：border-radius：像素或者百分比

2、盒子阴影：box-shadow

属性：X 轴偏移量， Y 轴便宜量颜色的虚幻程度阴影的颜色阴影的位置 (阴影默认在外部 inset是设置在内部)

（偏移量可以使负值，左负右正，上负下正）

#a1{ ???????????width: 100px; ???????????height: 100px; ???????????border: 1px solid #0000FF; ???????????background-image: url(QQ图片20180506095022.png); ???????????background-repeat: no-repeat; ???????????background-position: 20px 20px ; ???????????border-radius: 50%;}

二、背景

1、引入：background-image:url()

2、尺寸：size：100% 100%

3、平铺：repeat：no-repeat

4、位置：origin：content-box border-box padding-box position：top right left bottom（距左多少，距上多少7）

三、字体

1、字体的阴影：text-shadow：x轴 y轴阴影的模糊程度阴影颜色

2、字体溢出显示 over-flow：hidden white-space：nowap；

3、英文字体的换行

①，word-break:break-all 例如div宽200px，
　　它的内容就会到200px自动换行，
　　如果该行末端有个英文单词很长（congratulation等），
　　它会把单词截断，变成该行末端为conra(congratulation的前端部分)，
　　下一行为tulation（conguatulation）的后端部分了。

②、word-wrap:break-word 例子与上面一样，
         但区别就是它会把congratulation整个单词看成一个整体，
         如果该行末端宽度不够显示整个单词，
         它会自动把整个单词放到下一行，
         而不会把单词截断掉的。

#a2{ ???????????width: 200px; ???????????height: 50px; ???????????border: 1px solid chartreuse; ???????????word-break: break-word; ???????????????????}

四、透明度

1、opcity：0~1 越小越透明

2、background-color，rgba（）：

五、渐变色

1、background-image：linear-gradient（指向方向，颜色1，颜色2，颜色3）：

#a3{ ???????????width: 200px; ???????????height: 100px; ???????????border: 1px solid #7FFF00; ???????????color: black; ???????????background-image: linear-gradient(to top,blue,yellow,red); ???????????????????}

六、图片

1、img：src

2、鼠标移上显示（注释）

3、图片的圆角：border-radius

4、图片的阴影：box-shadow

5、图片的滤镜：filter

CSS3边框

原文地址：https://www.cnblogs.com/zhengleilei/p/8998183.html

CSS3边框

知识推荐