CSS3边框

标签：设置   .com   渐变   注释   inf   repeat   滤镜   idt   flow   

一、盒子边框

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、英文字体的换行

#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边框

标签：设置   .com   渐变   注释   inf   repeat   滤镜   idt   flow   

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