background:linear-gradient,backgroundlineargradient黑色
background: linear-gradient(to bottom,#D01B27,#C32D37);谁知道这个CSS怎么兼容IE浏览器
ie不支持linear-gradient的,可以使用filter滤镜解决。
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#000000,endColorstr=#ffffff,grandientType=1);
最后面grandientType用来控制渐变方向的只能上下或者左右(是0/1,还是1/2忘记了。)
C3文字属性以及线性渐变
titleDocument/title
? ? style
? ? ? ? div{
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? border: 1px solid red;
? ? ? ? ? ? margin: 50px auto;
? ? ? ? ? ? text-overflow: ellipsis;/* 超出文本用省略号表示 */
? ? ? ? ? ? white-space: nowrap;/* 文本不换行在同一行显示 */
? ? ? ? ? ? overflow: hidden;/* 溢出隐藏 */
? ? ? ? }
? ? /style
/head
body
? ? div
? ? ? ? sajd afn fkua nksaub diuasb ubadou fbosaufboa ubfosau bsaou bosau f
? ? /div
/body
div{
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? height: 600px;/* 从上往下 */
? ? ? ? ? ? background: linear-gradient(to bottom,red,green,blue);/* 从下往上 */
? ? ? ? ? ? background: linear-gradient(to top,red,green,blue);/* 从上往下 */
? ? ? ? ? ? background: linear-gradient(to left,red,green,blue);/* 从左往右 */
? ? ? ? ? ? background: linear-gradient(to left bottom,red,green,blue);/* 从坐下到右上 */
? ? ? ? ? ? /* 径向渐变 */
? ? ? ? ? ? background: radial-gradient(red 5%,green 30%,blue 40%);
? ? ? ? }
backgroundlinear-gradient的属性值怎么写
在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性。
background: -moz-linear-gradient(top, #bccfe3 0%, #d2dded 100%); 适合 FF3.6+
background: -webkit- gradient(linear, left top, left bottom, color-stop(0%,#bccfe3), color- stop(100%,#d2dded)); 适合 Chrome,Safari4+
background: -webkit-linear-gradient(top, #bccfe3 0%,#d2dded 100%); 适合Chrome10+,Safari5.1+
background: -o-linear-gradient(top, #bccfe3 0%,#d2dded 100%); 适合Opera 11.10+
background: -ms-linear-gradient(top, #bccfe3 0%,#d2dded 100%); 适合IE10+
background: linear-gradient(top, #bccfe3 0%,#d2dded 100%); 适合W3C
背景使用CSS渐变显示可以不使用图像就实现两个或两个以上的指定颜色的平滑过渡。这反过来又减少了下载时间和带宽的使用,放大时也比较好看,可以让您创造出一个更灵活的布局。
Firefox支持两种类型的CSS渐变:线性的(-moz-linear-gradient)和放射状的(-moz-radial-gradient)。
CSS如何使用渐变背景(linear-gradient)实现下划线?
background: linear-gradient(to right,#60B1F3 0,#60B1F3 16%, #DCDCDC 0,#DCDCDC 100%)
我现在才学到这里,不过我查了下资料自己会弄了。第二个色块从0到开始到自己的终止百分比就不会产生渐变了。
例:background: linear-gradient(to right,色块1 0,色块1 16%, 色块2 0,色块2 100%)