助你美化网站的实用css3技巧（2）

CSS3
calc() 的使用

calc()
用法类似于函数，能够给元素设置动态的值：

.**Block {

  width: calc(100% - 100px);

}

.complexBlock {

  width: calc(100% - 50% / 3);

  padding: 5px calc(3% - 2px);

  margin-left: calc(10% + 10px);

}

文本渐变

文本渐变效果很流行，使用
CSS3 能够很简单就实现：
h2[data-text]
{
  position:
relative;
}
h2[data-text]::after
{
  content:
attr(data-text);
  z-index:
10;
  color: #e3e3e3;
  position:
absolute;
  top: 0;
  left: 0;
  -webkit-mask-image:
-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)), to(rgba(0,0,0,0)));

禁止鼠标事件

CSS3
新增的 pointer-events 让你能够禁用元素的鼠标事件，例如，一个连接如果设置了下面的样式就无法点击了。

.disabled
{ pointer-events: none; }

盒子效果

下面的代码可以实现一个漂亮的盒子效果：
p {
padding: 5px
10px;
  margin:
10px;
  background:
#ff0030;
  color: #fff;
  font-size:
21px;
  line-height:
1.3em;
  border:
2px dashed #fff;
  border-radius:
3px;
  -moz-border-radius:
3px;
  -webkit-border-radius:
3px;
  -moz-box-shadow:
0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  -webkit-box-shadow:
0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
  box-shadow:
0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
  text-shadow:
-1px -1px #aa3030;
}

自定义滚动条

过去一直都只有
IE 才能设置滚动条样式，现在好了，Webkit 也提供了设置滚动条的属性：
::-webkit-scrollbar
{
  width: 12px;
}
::-webkit-scrollbar-track
{
  background:
none;
}
::-webkit-scrollbar-thumb
{
  background:
-webkit-linear-gradient(left, #547c90, #002640);
  border:
1px solid #333;
  box-shadow:
inset 1px 0 0 rgba(255, 255, 255, 0.4);
}

模糊文本
.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}