助你美化網站的實用css3技巧（2）

CSS3 calc() 的使用

calc() 用法相似於函數，可以給元素設置動態的值：

.simpleBlock {
  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);
}