用css写首诗,CSS原来这么神奇

利用 CSS 的 content 属性 attr 抓取资料

CSS的 content CSS 属性用于在元素的 ::before 和 ::after 伪元素中插入内容。使用content 属性插入的内容都是匿名的可替换元素。

attr(X) 将元素的X属性以字符串形式返回。如果该元素没有 X 属性，则返回一个空字符串。区分大小写的属性返回值依赖文挡的语言设定。

url()URI值会指定一个外部资源(比如图片)。如果该资源或图片不能显示，它就会被忽略或显示一些占位(比如无图片标志)。

hover

Home Page

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;

}

让文字像古诗一样竖着呈现

咏柳

碧玉妆成一树高，

万条垂下绿丝绦。

不知细叶谁裁出，

二月春风似剪刀。

.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