8个css常使用技巧

  • 时间:2018-06-17 20:59 作者:吐泡泡鱼 来源:吐泡泡鱼 阅读:262
  • 扫一扫,手机访问
摘要:1、鲜艳的锚链接a { color: #00e;}a:visited { color: #551a8b;}a:hover { color: #06e;}a:focus { outline: thin dotted;}a:hover, a:active { outline: 0;}a, a:visit
8个css常使用技巧

1、鲜艳的锚链接

a { color: #00e;}a:visited { color: #551a8b;}a:hover { color: #06e;}a:focus { outline: thin dotted;}a:hover, a:active { outline: 0;}a, a:visited, a:active { text-decoration: none; color: #fff; -webkit-transition: all .3s ease-in-out;}a:hover, .glow { color: #ff0; text-shadow: 0 0 10px #ff0;}

2、论文页面的卷曲效果

ul.box { position: relative; z-index: 1; /* prevent shadows falling behind containers with backgrounds */ overflow: hidden; list-style: none; margin: 0; padding: 0; }ul.box li { position: relative; float: left; width: 250px; height: 150px; padding: 0; border: 1px solid #efefef; margin: 0 30px 30px 0; background: #fff; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }ul.box li:before,ul.box li:after { content: ''; z-index: -1; position: absolute; left: 10px; bottom: 10px; width: 70%; max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */ max-height: 100px; height: 55%; -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -webkit-transform: skew(-15deg) rotate(-6deg); -moz-transform: skew(-15deg) rotate(-6deg); -ms-transform: skew(-15deg) rotate(-6deg); -o-transform: skew(-15deg) rotate(-6deg); transform: skew(-15deg) rotate(-6deg); }ul.box li:after { left: auto; right: 10px; -webkit-transform: skew(15deg) rotate(6deg); -moz-transform: skew(15deg) rotate(6deg); -ms-transform: skew(15deg) rotate(6deg); -o-transform: skew(15deg) rotate(6deg); transform: skew(15deg) rotate(6deg); }

3、CSS font属性缩写

p { font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;}

4、CSS3 圆点图案

body { background: radial-gradient(circle, white 10%, transparent 10%), radial-gradient(circle, white 10%, black 10%) 50px 50px; background-size: 100px 100px;}

5、禁使用移动Webkit的选择高亮

body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

6、在可打印的网页中显示URLs

@media print {  a:after {  content: " [" attr(href) "] ";  } }

7、深灰色的圆形按钮

.graybtn { -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; box-shadow:inset 0px 1px 0px 0px #ffffff; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) ); background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1'); background-color:#ffffff; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; border:1px solid #dcdcdc; display:inline-block; color:#777777; font-family:arial; font-size:15px; font-weight:bold; padding:6px 24px; text-decoration:none; text-shadow:1px 1px 0px #ffffff;}.graybtn:hover { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) ); background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff'); background-color:#d1d1d1;}.graybtn:active { position:relative; top:1px;}

8、CSS悬浮提醒文本

a {  border-bottom:1px solid #bbb; color:#666; display:inline-block; position:relative; text-decoration:none;}a:hover,a:focus { color:#36c;}a:active { top:1px; }/* Tooltip styling */a[data-tooltip]:after { border-top: 8px solid #222; border-top: 8px solid hsla(0,0%,0%,.85); border-left: 8px solid transparent; border-right: 8px solid transparent; content: ""; display: none; height: 0; width: 0; left: 25%; position: absolute;}a[data-tooltip]:before { background: #222; background: hsla(0,0%,0%,.85); color: #f6f6f6; content: attr(data-tooltip); display: none; font-family: sans-serif; font-size: 14px; height: 32px; left: 0; line-height: 32px; padding: 0 15px; position: absolute; text-shadow: 0 1px 1px hsla(0,0%,0%,1); white-space: nowrap; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}a[data-tooltip]:hover:after { display: block; top: -9px;}a[data-tooltip]:hover:before { display: block; top: -41px;}a[data-tooltip]:active:after { top: -10px;}a[data-tooltip]:active:before { top: -42px;}

相信很多自学的小伙伴都想学习web前台,能关注小编后私信【学习】能免费领取学习地址/案例教程/2018最新的一套学习教程,让学习有方向。

8个css常使用技巧

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】2019年web前端开发技术框架有哪些(2019-07-20 12:06)
【系统环境|】什么是Web?零基础能不能学Web前端开发?(2019-07-19 07:04)
【网页前端|HTML】为什么学Web前端?选择Web前端理由(2019-07-17 20:28)
【网页前端|JS】Java面经-百度新入职老哥整理近半年学习经验,面试刷题路线!(2019-07-16 22:16)
【网页前端|HTML】最全面的前端开发指南(2019-07-15 12:57)
【系统环境|数据库】零基础如何快速学好大数据?(2019-06-29 12:27)
【系统环境|Linux】零基础如何学好大数据?必备需要学习知识(2019-06-18 11:54)
【系统环境|】Hadoop环境中管理大数据存储八大技巧(2019-06-15 11:01)
【系统环境|服务器应用】现在国内IT行业是不是程序员过多了?(2019-06-11 06:34)
【系统环境|服务器应用】新贵 Flutter(2) 自己设置 Widget(2019-06-11 06:34)
手机二维码手机访问领取大礼包
返回顶部