腾讯云服务器优惠活动华纳云香港服务器
boke112百科 » 海纳百川 » 正文

CSS技巧：常用的几个CSS前端效果 更轻松的写页面

雅兮网更新于 2018-01-28 10:03:41首发于 2018-01-31 07:35:55507

做页面需要一定的 CSS 基本功，虽然现在有很多成熟的框架如 bootstrap 等，我们轻松的就就可以做出一些页面效果。但是掌握每一个常见效果的写法还是很重要的，下面整理出一些常见的 CSS 前端效果，让你更轻松的写页面。

CSS技巧：常用的几个CSS前端效果 更轻松的写页面-第1张-boke112百科(boke112.com)

1、禁止选择文本

  1. body {
  2. -webkit-touch-callout: none;
  3. -webkit-user-select: none;
  4. -khtml-user-select: none;
  5. -moz-user-select: none;
  6. -ms-user-select: none;
  7. user-select: none;
  8. }

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

  1. @media print {
  2. a:after {
  3. content: ” [“ attr(href) “] “;
  4. }
  5. }

3、深灰色的点击渐变按钮

  1. .graybtn {
  2. -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
  3. -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
  4. box-shadow:inset 0px 1px 0px 0px #ffffff;
  5. background:-webkit-gradient( linear, left top, left bottombottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
  6. background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
  7. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff‘, endColorstr=’#d1d1d1‘);
  8. background-color:#ffffff;
  9. -moz-border-radius:6px;
  10. -webkit-border-radius:6px;
  11. border-radius:6px;
  12. border:1px solid #dcdcdc;
  13. display:inline–block;
  14. color:#777777;
  15. font-family:arial;
  16. font-size:15px;
  17. font-weight:bold;
  18. padding:6px 24px;
  19. text-decoration:none;
  20. text-shadow:1px 1px 0px #ffffff;
  21. }
  22. .graybtn:hover {
  23. background:-webkit-gradient( linear, left top, left bottombottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
  24. background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
  25. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#d1d1d1‘, endColorstr=’#ffffff‘);
  26. background-color:#d1d1d1;
  27. }
  28. .graybtn:active {
  29. position:relative;
  30. top:1px;
  31. }

4、网页顶部盒阴影

  1. body:before {
  2. content: “”;
  3. position: fixed;
  4. top: –10px;
  5. left: 0;
  6. width: 100%;
  7. height: 10px;
  9. -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  10. -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  11. box-shadow: 0px 0px 10px rgba(0,0,0,.8);
  12. z-index: 100;
  13. }

5、在可点击的项目上强制手型

  1. a[href], input[type=’submit’], input[type=’image’], label[for], select, button, .pointer {
  2. cursor: pointer;
  3. }

6、CSS3 鲜艳的输入（边框渐变）

  1. input[type=text], textarea {
  2. -webkit-transition: all 0.30s ease-in-out;
  3. -moz-transition: all 0.30s ease-in-out;
  4. -ms-transition: all 0.30s ease-in-out;
  5. -o-transition: all 0.30s ease-in-out;
  6. outline: none;
  7. padding: 3px 0px 3px 3px;
  8. margin: 5px 1px 3px 0px;
  9. border: 1px solid #ddd;
  10. }
  12. input[type=text]:focus, textarea:focus {
  13. box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  14. padding: 3px 0px 3px 3px;
  15. margin: 5px 1px 3px 0px;
  16. border: 1px solid rgba(81, 203, 238, 1);
  17. }

7、三角形列表项目符号

  1. ul {
  2. margin: 0.75em 0;
  3. padding: 0 1em;
  4. list-style: none;
  5. }
  6. li:before {
  7. content: “”;
  8. border-color: transparent #111;
  9. border-style: solid;
  10. border-width: 0.35em 0 0.35em 0.45em;
  11. display: block;
  12. height: 0;
  13. width: 0;
  14. left: -1em;
  15. top: 0.9em;
  16. position: relative;
  17. }

8、内部CSS3 盒阴影

  1. #mydiv {
  2. -moz-box-shadow: inset 2px 0 4px #000;
  3. -webkit-box-shadow: inset 2px 0 4px #000;
  4. box-shadow: inset 2px 0 4px #000;
  5. }

9、外部CSS3 盒阴影

  1. #mydiv {
  2. -webkit-box-shadow: 0 2px 2px –2px rgba(0, 0, 0, 0.52);
  3. -moz-box-shadow: 0 2px 2px –2px rgba(0, 0, 0, 0.52);
  4. box-shadow: 0 2px 2px –2px rgba(0, 0, 0, 0.52);
  5. }

10、@font-face模板

  1. @font-face {
  2. font-family: ‘MyWebFont’;
  3. src: url(‘webfont.eot’); /* IE9 Compat Modes */
  4. src: url(‘webfont.eot?#iefix‘) format(’embedded-opentype’), /* IE6-IE8 */
  5. url(‘webfont.woff’) format(‘woff’), /* Modern Browsers */
  6. url(‘webfont.ttf’) format(‘truetype’), /* Safari, Android, iOS */
  7. url(‘webfont.svg#svgFontName’) format(‘svg’); /* Legacy iOS */
  8. }
  10. body {
  11. font-family: ‘MyWebFont’, Arial, sans-serif;
  12. }

11、CSS3渐变模板

  1. #colorbox {
  2. background: #629721;
  3. background-image: -webkit-gradient(linear, left top, left bottombottom, from(#83b842), to(#629721));
  4. background-image: -webkit-linear-gradient(top, #83b842, #629721);
  5. background-image: -moz-linear-gradient(top, #83b842, #629721);
  6. background-image: -ms-linear-gradient(top, #83b842, #629721);
  7. background-image: -o-linear-gradient(top, #83b842, #629721);
  8. background-image: linear-gradient(top, #83b842, #629721);
  9. }

12、CSS3：全屏背景

  1. html {
  2. background: url(‘images/bg.jpg’) no-repeat center center fixed;
  3. -webkit-background–size: cover;
  4. -moz-background–size: cover;
  5. -o-background–size: cover;
  6. background–size: cover;
  7. }
赞 (0) 打赏
1 2
版权声明：本文为投稿文章，感谢 雅兮网 的投稿，版权归原作者所有！发布此文是出于传递更多信息之目的，若有来源标注错误或侵犯了您的合法权益，请联系我们，确认后马上更正或删除，谢谢！
标签

相关文章

最新文章

免备案外贸虚拟主机SiteGround

热门标签

Copyright © boke112百科基于 WordPress + YIA 构建桂ICP备14004711号-3anbei桂公网安备 45010502000016号
wu