华纳云香港服务器
boke112百科 » 海纳百川 » 正文

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

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

13、锚链接伪类

  1. a:link { color: blue; }
  2. a:visited { color: purple; }
  3. a:hover { color: red; }
  4. a:active { color: yellow; }

14、图片边框偏光

  1. img.polaroid {
  2. background:#000; /*Change this to a background image or remove*/
  3. border:solid #fff;
  4. border-width:6px 6px 20px 6px;
  5. box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
  6. -webkit-box-shadow:1px 1px 5px #333;
  7. -moz-box-shadow:1px 1px 5px #333;
  8. height:200px; /*Set to height of your image or desired div*/
  9. width:200px; /*Set to width of your image or desired div*/
  10. }

15、通用媒体查询

  1. /* Smartphones (portrait and landscape) ———– */
  2. @media only screen
  3. and (min-device-width : 320px) and (max-device-width : 480px) {
  4. /* Styles */
  5. }
  7. /* Smartphones (landscape) ———– */
  8. @media only screen and (min-width : 321px) {
  9. /* Styles */
  10. }
  12. /* Smartphones (portrait) ———– */
  13. @media only screen and (max-width : 320px) {
  14. /* Styles */
  15. }
  17. /* iPads (portrait and landscape) ———– */
  18. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  19. /* Styles */
  20. }
  22. /* iPads (landscape) ———– */
  23. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  24. /* Styles */
  25. }
  27. /* iPads (portrait) ———– */
  28. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  29. /* Styles */
  30. }
  32. /* Desktops and laptops ———– */
  33. @media only screen and (min-width : 1224px) {
  34. /* Styles */
  35. }
  37. /* Large screens ———– */
  38. @media only screen and (min-width : 1824px) {
  39. /* Styles */
  40. }
  42. /* iPhone 4 ———– */
  43. @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  44. /* Styles */
  45. }

16、跨浏览器透明

  1. .transparent {
  2. filter: alpha(opacity=50); /* internet explorer */
  3. -khtml-opacity: 0.5; /* khtml, old safari */
  4. -moz-opacity: 0.5; /* mozilla, netscape */
  5. opacity: 0.5; /* fx, safari, opera */
  6. }

17、用CSS动画实现省略号动画

  1. .loading:after {
  2. overflow: hidden;
  3. display: inline–block;
  4. vertical-align: bottombottom;
  5. animation: ellipsis 2s infinite;
  6. content: “\2026”; /* ascii code for the ellipsis character */
  7. }
  8. @keyframes ellipsis {
  9. from {
  10. width: 2px;
  11. }
  12. to {
  13. width: 15px;
  14. }
  15. }

18、制造模糊文本

  1. .blurry-text {
  2. color: transparent;
  3. text-shadow: 0 0 5px rgba(0,0,0,0.5);
  4. }

19、包裹长文本 文本过长自动换行不会穿破盒子

  1. pre {
  2. whitewhite-space: pre-line;
  3. word-wrap: break-word;
  4. }

20、背景渐变色

  1. button {
  2. background-image: linear-gradient(#5187c4, #1c2f45);
  3. background–size: auto 200%;
  4. background-position: 0 100%;
  5. transition: background-position 0.5s;
  6. }
  7. button:hover {
  8. background-position: 0 0;
  9. }

21、内容可编辑（contenteditable=”true”）

  1. <ul contenteditable=“true”>
  2. <li>悼念遇难香港同胞 </li>
  3. <li>深圳特区30周年</li>
  4. <li>伊春空难</li>
  5. </ul>

22、输入框改变placeholder字体颜色

  1. ::-webkit-input-placeholder {
  2. color: red;
  3. }
  4. :-moz-placeholder {
  5. color: red;
  6. }
  7. ::-moz-placeholder{
  8. color: red;
  9. }
  10. :-ms-input-placeholder {
  11. color: red;
  12. }
赞 (0) 打赏
1 2
版权声明：本文为投稿文章，感谢 雅兮网 的投稿，版权归原作者所有！发布此文是出于传递更多信息之目的，若有来源标注错误或侵犯了您的合法权益，请联系我们，确认后马上更正或删除，谢谢！
标签

相关文章

最新文章

免备案外贸虚拟主机SiteGround

热门标签

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