搜索到
1
篇与
css
的结果
-
实现漂亮的CSS条纹背景与边框 本文主要介绍如实使用css完成复杂的边框与背景，让你的网站添加色彩文章目录索引一、css边框1.css半透明边框我们使用rgba,halc方法来实现半透明，设定对象为borderhsla() 函数使用色相、饱和度、亮度、透明度来定义颜色。HSLA 即色相、饱和度、亮度、透明度。(css3)rgba() 函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。RGBA 即红色、绿色、蓝色、透明度(css3) /* 半透明边框 */ .tratnslucentborder{ width: 300px; height: 200px; border:10px solid rgba(155, 86, 97, 0.3);//半透明边框 background-image: url('./35.jpg'); background-clip: padding-box; background-size: contain; }2.css多重边框(1) 1outline 解决方案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; }(2) 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; }3.css边框内圆角outline不会随着圆角的变化而变化不会随着圆角的变化而变化，box-shadow会随着圆角的变化而变化 .borderInnerCircle{ width: 60%; height: 60%; background-color: blue; background-image: url('./36.png'); background-repeat: no-repeat; background-position: right 20px bottom 10px; border-radius: .8em; padding: 1em; box-shadow: 0 0 0 .6em #655; /* outline: .6em solid #655; 不会随着圆角的变化而变化*/ }二、css背景1.灵活的背景定位（1）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;//右下 }（2）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 }2.css条纹背景(1)css水平无渐进条纹linear-gradient() 函数用于创建一个线性渐变的 "图像"。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。(css3) .tiaowen{ width: 60%; height: 60%; background: linear-gradient(#788 50%,red 50%); /* background-size: 100% 20px; */ }(2)css垂直条纹规定方向为to right,或者90deg /* 垂直条纹 */ .verticalStripes{ width: 60%; height: 60%; background: linear-gradient(to right,#788 15px,red 15px); background-size: 30px 100%; }(3)css斜向条纹规定角度为45deg，或其他角度 .diagonalStripes{ width: 60%; height: 60%; background: linear-gradient(45deg,#788 25%,red 0,red 50%,#788 0,#788 75%,red 0); background-size: 30px 30px; } (4)更好的斜向条纹 .betterDiagonalStripes{ width: 60%; height: 60%; background: linear-gradient(45deg,#788 ,red 30px,#788 30px,red 60px,#788 60px,#788 120px,red 120px,#788 150px); background-size: 30px 30px; }(5)灵活的同色系条纹repeating-linear-gradient() 函数用于创建重复的线性渐变 "图像" .flexibleStripes { width: 60%; height: 60%; background: #58a; background-image: repeating-linear-gradient(30deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px); }原文作者：雾灵原文链接：https://juejin.cn/post/6979003471072591909本文来源：掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
