请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
优雅的渐变边框
实现原理:利用 background-clip|origin|image 相配合,辅以边框、线性渐变等属性设定,产生单元素盒子渐变边框效果。代码:
<style>
.myBox {
margin: auto;
padding: 8px;
width: 740px;
min-height: 300px;
border: 4px solid transparent;
border-radius: 10px;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #fff, #eee),
linear-gradient(90deg, #f05654, #9ed900,#426666, #3eede7, #845a33);
}
</style>
<div class="myBox"></div>
在 background-clip|origin|image 中,都是两两赋值,前一组值针对针对元素里边的区域,后一组值针对边框,其中,边框渐变颜色可以极简到两个颜色参与渐变,也可以是多个。
PS:CSS3有一个 border-image 属性,支持渐变背景,但若使用了 border-image 属性,border-radius 将失效,圆角边框无法实现。
|