助你美化网站的实用css3技巧(2)
博客专区 > lotozhou 的博客 > 博客详情
助你美化网站的实用css3技巧(2)
lotozhou 发表于2年前
助你美化网站的实用css3技巧(2)
  • 发表于 2年前
  • 阅读 46
  • 收藏 4
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

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);
}


共有 人打赏支持
粉丝 9
博文 51
码字总数 51524
×
lotozhou
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: