css背景与边框
程序员文章站
2022-04-28 07:58:37
...
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
}
代码下载
感谢
如果感觉对您的学习工作有帮助,请将它分享给需要的人,或者点赞鼓励一下,感谢支持
我还会不断更新。。。