欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

css背景与边框

程序员文章站 2022-04-28 07:58:37
...

半透明边框

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
    }

代码下载

感谢

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

相关标签: css学习