background、border 渐变色

作者: 图恩分类: 编程开发阅读: 756发布时间： 2020-04-12 15:46:28

背景渐变色：background linear-gradient 线性渐变色 radial-gradent 径向渐变示例： background: radial-gradient(50px, #f00, #ff0, #080) background: linear-gradient(to top right, #000, skyblue 10px , #090); border渐变色 1.border-image '20为宽度' border-image：linear-gradient(50px, #f00, #ff0, #080) 20； border-image: radial-gradient(to top right, #000, skyblue 10px , #090) 20; 2.border-colors 只有火狐支持 -moz-border-top-colors:red orange yellow green cyan blue purple; -moz-border-right-colors: red orange yellow green cyan blue purple; -moz-border-bottom-colors: red orange yellow green cyan blue purple; -moz-border-left-colors: red orange yellow green cyan blue purple; 3.使用 background-origin 、background-clip实现 background-clip:padding-box,border-box; background-origin:padding-box,border-box; background-image:linear-gradient(180deg,#000,#000),linear-gradient(180deg,red,yellow); border:8px transparent solid; 4.通过padding实现，并支持倒圆角给父节点设置渐变背景，通过padding模拟边框（此处的padding值就是border需要的值），注意父元素和子元素的border-radius属性值保持一致