那些不常用却又很实用的CSS
首页 >  Web前端 > htmlcss  > 2018年02月02日阅(697)评(0

1.伪元素first-letter设置首字样式

/*首字下沉示例*/
p::first-letter{float:left;font-size:3em;line-height:1;color:#f00}

2.伪元素first-line设置段落第一行样式

p::first-line{color:#f00;font-weight:bold}

3.:nth-child(odd/even)选中奇偶行

当然也可以使用:nth-child(2n-1)和:nth-child(2n)实现

4.:not排除选择器

/*除开type为password之外的input都设置红色1px的border*/
input:not([type=password]){border:1px solid #f00}
/*除开设置了readonly和disabled之外的input都设置黄色2px的border*/
input:not([readonly]):not([disabled]){border:2px solid #ff0}
/*除开class为test的p标签都设置加粗*/
p:not(.test){font-weight:bold}

5.placeholder样式设置

::-webkit-input-placeholder{color:#ccc;}/*WebKit browsers*/
:-moz-placeholder{color:#ccc;}/*Mozilla Firefox 4 to 18*/
::-moz-placeholder{color:#ccc;}/*Mozilla Firefox 19+*/
:-ms-input-placeholder{color:#ccc;}/*Internet Explorer10+*/

6.::selection设置选中文本的样式

/*示例:设置选中文本背景色为红色,字体颜色为白色*/
::selection{color:#fff;background-color:#f00;}

7.渐变(gradients)

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
background: -webkit-linear-gradient(left, #039, #f00); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #039, #f00); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #039, #f00); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, #039, #f00); /* 标准的语法(必须放在最后) */

8.calc() 函数

calc() 函数用于动态计算长度值。

php简单编写api接口
查看或删除qq历史头像的方法

有朋自远方来...评论一下呗O(∩_∩)O哈哈~

QQ
昵称*
邮箱*
主页