css3笔记2 边框,背景

        .box{
            width: 300px;
            height: 200px;
            background-color: #0070A9;
            border: 27px solid #ccc;
            
            border-image: url(./images/panel_tools.png);
            border-image-slice: 27 12 14 20;
            切割顺序是，上一刀，右一刀，下一刀，左一刀*/
            默认填充方式是拉伸 stretch*/
            border-image-repeat: repeat;*/
            可以设置成平铺*/
            border-image-repeat: round;*/
            整数次平铺，有可能放大缩小*/
            border-image-repeat: space;*/
            也会整数次平铺，不放大或缩小，但是会有一定的间隙*/
            border-image-repeat: space round;*/
            两个值时，第一个水平，第二个垂直*/
            
            border-image: url(../../img/1.jpg) 27 12 15 21 round round;
            /*可以全部放在一起写。*/
        }

图片.png

        li:nth-child(3){
            /*border-bottom-right-radius: 15px;*/
            /*border-bottom-right-radius: 15px 30px;*/
            /*相当于用椭圆进行切割*/
            
            border-radius: 40px 30px 20px 10px / 10px 20px 30px 40px;
            border-radius: 40% 30% 20% 10% / 10% 20% 30% 40%;
                可以用百分比, 百分比是对应的各个方向的边长
            /*斜线前面的标识水平方向半径，斜线后面的标识垂直方向半径*/
                顺序是左上,右上,右下,左下
        }

图片.png

        .box{
            width: 100px;
            height: 100px;
            padding: 100px;
            border: 100px solid rgba(55,55,55,0.2);
            background:
            /*url(../../img/2.jpg) no-repeat;*/
            url(../../img/1.jpg) no-repeat,
            linear-gradient(to right,rgba(12,12,200,.5),rgba(85,77,0,0.6)), 
            linear-gradient(to top,rgba(0,0,250,0.5),rgba(250,120,11,0.6)); 
            /*可以设置多层背景。渐变可以rgba 可以防止覆盖。*/
            /*有没有办法让图片也能进行透明度的设置？*/
            /*让图片完全覆盖区域,不留余白,*/
            /*background-size: cover;*/
            /*让图片完整展示, 可能有留白*/
            /*background-size: contain;*/
            /*背景图片默认从padding开始显示*/
            /*background-origin: content-box ;*/
            /*content-box 起点为内容区域*/
            background-origin: border-box ;
            /*border-box 起点诶边框！这个就很有意思了，因为之前我们有过这种需求*/
            /*先显示背景，后显示边框，边框的层级比背景高*/
            /*background-origin: padding-box ;*/
            /*这个就是默认的，也就是从padding处开始*/
            
            /*以上是背景图片的 size 以及 origin*/
            
            
            /*裁剪*/
            /*background-clip: padding-box;*/
            /*从pdd开始裁剪*/
            /*background-clip: content-box;*/
            /*从内容区域裁剪*/
            /*background-clip: border-box;*/
            /*从边框裁剪*/
            
            /*其实这个还是有用的，因为之前我想裁剪显示的话，通常是通过background-position 以及div 的大小来调整的，当时挺费劲的*/
        }

图片.png

图片.png

image.png

image.png