CSS盒子模型 |
您所在的位置：网站首页 › 黑白渐变色背景图片 › CSS盒子模型 |
CSS盒子模型
|
目录 一、边框渐变色 1、采用border-image（linear-gradient）设置边框颜色渐变实例 2、采用叠加方法设置边框颜色渐变实例 3、采用单层元素、background-clip、background-origin、background-image设置边框颜色渐变实例 二、背景渐变色 三、补充 一、边框渐变色 1、采用border-image（linear-gradient）设置边框颜色渐变实例例： #d1{ width: 300px; height: 300px; border:10px solid #ddd; border-image: linear-gradient(#D40, #07F) 1; }相当于： #d1{ width: 300px; height: 300px; border:10px solid #ddd; border-image-source: linear-gradient(#D40, #07F); border-image-slice: 1; }浏览器效果：
ps：这种方法虽然简单但是不支持设置边框圆角border-radius。 2、采用叠加方法设置边框颜色渐变实例思路：使用两个盒子叠加，给下层的盒子设置渐变色背景和 padding，给上层盒子设置纯色背景。（若要设置边框圆角，则可以分别对上下盒子进行圆角设置） 例： #d0{ width: 300px; height: 300px; background: linear-gradient(to right,#D40, #07F); padding: 10px; border-radius: 10px; } #d1{ height: 100%; background: #FFF; border-radius: 10px; }浏览器效果：
ps：这种方法容易理解且兼容性好，但是缺点是content的border-radius的设置会比较麻烦。 3、采用单层元素、background-clip、background-origin、background-image设置边框颜色渐变实例思路：对单层元素分别设置 background-clip、background-origin、background-image 这三个属性，每个属性设置两组值，第一组用于设置border内的单色背景，第二组用于设置border上的渐变色。 例： #d0{ width: 300px; height: 300px; border: 10px solid transparent; /*transparent是全透明色彩（是全透明黑色的速记），类似rgba(0,0,0,0)*/ border-radius: 18px; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(to right, #FFF, #FFF), linear-gradient(90deg, #D40, #07F); }浏览器效果：
ps：圆角设置过小的话（ |
【本文地址】
今日新闻 |
推荐新闻 |