css背景与边框

半透明边框

rgba,halc来实现半透明，设定对象为border
hsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。HSLA 即色相、饱和度、亮度、透明度。(css3)
rgba() 函数使用红®、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。RGBA 即红色、绿色、蓝色、透明度(css3)

     /* 半透明边框 */
     .tratnslucentborder{
         width: 300px;
         height: 200px;A
         border:10px solid rgba(155, 86, 97, 0.3);//半透明边框
         background-image: url('./35.jpg');
         background-clip: padding-box;
         background-size: contain;
     }

多重边框

outline 解决方案

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline简写属性在一个声明中设置所有的轮廓属性。(css2)
适用于两层边框，样式可以设置成各种样式

     /* outline解决方案 */
     .outlinetwoline{
        width: 300px;
         height: 200px;
         border:10px solid red;
         outline:5px solid black;
         border-radius: 12px;
         background-image: url('./35.jpg');
         background-clip: padding-box;
         background-size: contain;
     }

box-shaow解决方案

box-shadow 支持逗号分隔语法，可以创建多个实线边框(css3)

	/* 多重边框|box-shadow解决方案 */
     .multipleborder{
         width: 300px;
         height: 200px;
         border:10px solid red;
         box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;
         background-image: url('./35.jpg');
         background-clip: padding-box;
         background-size: contain;
     }

灵活的背景定位

background-position 的扩展语法方案

background-position属性设置背景图像的起始位置。(css1)

    .backgroundposition{
        width: 60%;
        height: 60%;
        background-color: blue;
        border:8px solid #655;
        background-image: url('./36.png');
        background-repeat: no-repeat;
        background-position:  right 20px bottom 10px;//右下
    }

background-origin 的扩展语法方案

background-Origin属性指定background-position属性应该是相对位置。
如果背景图像background-attachment是"固定"，这个属性没有任何效果

    .backgroundorgin{
        width: 60%;
        height: 60%;
        background-color: blue;
        border:8px solid #655;
        padding: 10px;
        background: url("./36.png") left 17px bottom;//左下
        background-color: blue;
        background-repeat: no-repeat;
        background-origin: content-box;//相对于content
    }

代码下载

感谢

如果感觉对您的学习工作有帮助，请将它分享给需要的人，或者点赞鼓励一下，感谢支持
我还会不断更新。。。