CSS原来这么神奇
2017-10-25 本文已影响0人
summer_1874
利用 CSS 的 content 属性 attr 抓取资料
CSS的 content CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。
attr(X) 将元素的X属性以字符串形式返回。如果该元素没有 X 属性，则返回一个空字符串。区分大小写的属性返回值依赖文挡的语言设定。
url()URI值会指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位（比如无图片标志）。
<div data-msg="open this file in github desktop">
hover
</div>
<!--link前面加一个icon-->
<a href="http://www.mozilla.org/en-US/">Home Page</a>
div{
width: 100px;
border:1px solid red;
position:relative;
}
div:hover:after{
content:attr(data-msg);
position:absolute;
font-size: 12px;
width:200%;
line-height:30px;
text-align:center;
left:0;
top:25px;
border:1px solid green;
}
a::before{
content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
font: x-small Arial,freeSans,sans-serif;
color: gray;
}
content 属性 attr.png
link前面加一个icon.png
利用 nth-of-type 选择某范围内的子元素
/*偶数*/
tbody tr:nth-of-type(2n){
background-color: red;
}
/*奇数*/
tbody tr:nth-of-type(2n+1){
background-color: green;
}
让文字像古诗一样竖着呈现
<div class="verticle-mode">
<h4>咏柳</h4>
<p>碧玉妆成一树高，
<br>万条垂下绿丝绦。
<br>不知细叶谁裁出，
<br>二月春风似剪刀。</p>
</div>
.verticle-mode {
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
移动web页面支持弹性滚动
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.
-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */
-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */
body{
-webkit-overflow-scrolling: touch; /* ios5+ */
}
ele{
overflow:auto;
}
-webkit-overflow-scrolling属性具有继承效果，所以在 body 上设置即可，这样局部滚动条就非常的流畅了。
改变 input 焦点光标的颜色
caret-color 属性用来定义插入光标（caret）的颜色，这里说的插入光标，就是那个在网页的可编辑器区域内，用来指示用户的输入具体会插入到哪里的那个一闪一闪的形似竖杠 | 的东西。
input {
caret-color: red;
}
CSS 如何实现文字两端对齐
CSS 属性 text-align-last 描述的是一段文本中最后一行在被强制换行之前的对齐规则。
语法
auto | start | end | left | right | center | justify
p {
text-align-last:justify;
}
让网站所有图片变成黑白色彩的
CSS滤镜（filter）属提供的图形特效，像模糊，锐化或元素变色。过滤器通常被用于调整图片，背景和边界的渲染。
img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
sources
