广州企业建站素材,做搜狗手机网站快,营销型网站托管,兴化市建设局网站目录前言border-imageborder-image实现background父子divbackgorund一个div一个伪元素background-clip#x1f9e8;#x1f9e8;#x1f9e8; 大家好#xff0c;我是搞前端的半夏 #x1f9d1;#xff0c;一个热爱写文的前端工程师 #x1f4bb;. 如果喜欢我的文章…
目录前言border-imageborder-image实现background父子divbackgorund一个div一个伪元素background-clip大家好我是搞前端的半夏 一个热爱写文的前端工程师 . 如果喜欢我的文章可以关注 ➕ 点赞 一起学习交流前端成为更优秀的工程师 更多故事—点我探索新世界 前言
总有人觉得CSS就是一个布局的工具忽视了CSS的重点CSS的全称是啥层叠样式表Cascading Style Sheets第二个词是啥样式样式样式总有人把CSS的强大忽略了。同样的效果不同的实现方式总会有好有坏但是就怕你一种也不会本文主要通过一个边框的实现方式来学习不同的属性。
border-image
我之前写过一篇文章来专门来介绍这个属性。《24张图攻克border-image 》这里再简单的介绍一下。
border-image
首先这个属性是下面个属性的缩写
border-image-source 指定资源
border-image-slice规定图片剪裁位置
border-image-width指定宽度
border-image-outset 指定在边框外部绘制 区域 的量
border-image-repeat 这个是和background-repeat基本差不多*
实现
border-image-source不仅可以接受图片还可以接受渐变。
注意这种实现方式有一个缺点就是 border-radius:是无法生效的。所以圆角渐变边框,只能say bye!
这里将整个div分割然后使用streach拉伸整个border-image. .border-image {width: 200px;height: 100px;border: 2px solid;border-image-source: linear-gradient(45deg, #56ECC7, #9f5ad8);border-image-slice: 1;border-image-repeat: stretch;}background父子div
div classcontainerdiv classbox/div
/divstyle.container {background: linear-gradient(45deg,#56ECC7 0%, #6067f3 100%);padding: 1px;width: 200px;height: 100px;border-radius: 4px;}.box {background: #fff;border-radius: 4px;width: 100%;height: 100%;}/style/headbodydiv classcontainerdiv classbox/div/divbackgorund一个div一个伪元素
看到上一个例子可能有人此时会想到既然可以使用两个div那为何不使用一个div加上:after呢当然是可以的 注意这里的伪元素充当的是上面父div的角色可能有人非不信一定要把渐变加在container上然后为元素设置白色。你有没有考虑容器有内容的情况。 .container::after {content: ;z-index: -1;background: linear-gradient(45deg,#56ECC7 0%, #6067f3 100%);
}div classcontainer渐变边框/divbackground-clip
这个属性不多介绍了请看之前的文章http://sylblog.xin/archives/38
background-clip: content-box背景被裁剪至内容区content box外沿.
background-clip: border-box背景延伸至边框外沿但是在边框下层.
我们这里设置两个渐变一个全白的渐变使用background-clip: content-box让他覆盖内容区域。然后使用background-clip: border-box将 linear-gradient(45deg, #56ecc7, #6067f3);放到border上面。这样是为啥要设置 background-origin: border-box; .container {border: solid 1px transparent;border-radius: 5px;background-image: linear-gradient(#fff, #fff),linear-gradient(45deg, #56ecc7, #6067f3);background-origin: border-box;background-clip: content-box, border-box;text-align: center;line-height: 80px;}
