CSS圆角边框制做指南与案例

日期：2021-03-04 类型：科技新闻 

关键词：在线抠图，稿定抠图，在线抠图透明图片，可以抠图的软件，凡科制图

应用 CSS 制做圆角边框将会是网页页面前端开发设计方案师们最头痛的难题之1. 圆角边框看似简易, 但完成起来却很不简易, 将会必须繁杂的网页页面构造或很多的边角照片, 方式许多, 但不管哪种全是无法维护保养的.

CSS 很直观, 但明显不足灵便, 致使网页页面设计方案中出現很多冗余编码. 不可以应用自变量和循环系统, 若想消除某个种类全部特性的值还必须1句1句的消除, 而并不是1句进行. 而最让人痛心的莫过度实际圆角边框, 也许下列的编码是大家可望不可及的:

CSS Code拷贝內容到剪贴板
  1. .roundbox { round: 3px; } /* 圆角尺寸为3像素 */  

怎奈不如人意, W3C 里边沒有这样的物品. 一些访问器适用1些独特的特性能够完成相近作用, 但那其实不能获得别的访问器的适用. WordPress 后台管理就应用了这样的特性, Firefox 等1些访问器上显示信息十分漂亮, 但 IE 上却不忍直视.

以便完成小圆角, 各网站是各出奇招, 甚么方式都有. 而我较为喜爱百度搜索了解的完成方法, 由于零照片, 而且易于操纵, 由于圆角一部分是在 box 外界, 随时能够无害删掉.

百度搜索了解的方式借用了 div 在 float:none 时占有全行的特点, 在 box 上方和正下方各都置放几个 div, 并对这些 div 设定情况色, 边框和外边距. 也便是说, 大家要是固定不动了外层的宽度, 别的的就不必须操劳了. 我效仿百度搜索了解的款式做了1个事例, 实际效果能够参照1下右侧的截图. 完成编码以下:

CSS Code拷贝內容到剪贴板
  1. <div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>   
  2. <div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>   
  3. <div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>   
  4. <div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>   
  5. <div style="background:#E1E7E9; border:1px solid #B0BEC7; border-width:0 1px;">   
  6.  <div style="font-size:12px; font-weight:bolder; font-family:Verdana; color:#258; padding:2px 10px 5px;">   
  7.   Cascading Style Sheets   
  8.  </div>   
  9.  <div style="background:#FFF; margin:0 3px; font-size:11px; font-family:Verdana; color:#333; padding:5px 10px; overflow:hidden;">   
  10.   Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Tutorials, books, mailing lists for users, etc.   
  11.  </div>   
  12. </div>   
  13. <div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>   
  14. <div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>   
  15. <div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>   
  16. <div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>   

在其中有1点是很关键的, 记得为左右圆角所属的行加上 overflow:hidden 特性, 不然在 IE 中可能非常的恶心想吐.

圆角是完成了, 但其实不是完善无瑕的, 边角有锯齿 (下面会详细介绍小圆角实际的方式能够解决锯齿, 要是你不嫌不便). 为何不可以应用过渡色调呢? 由于圆角所属的行只能操纵情况和边框两处的色调, 因此不可以在同1行搞出较为繁杂的色调过渡. 由于色调被限定了, 因此圆角的尺寸也被限定了 (有锯齿的圆角太交流会显得很不好看), 假如你的 box 有边线, 圆角尺寸提议不必超出 4 个像素, 假如没边线, 也不必超出 6 个像素. 有更大的圆角必须最好是還是选用照片, 解决简易又便捷.

浏览过腾迅问问的盆友将会会发现, 它的款式是抄袭百度搜索了解的. 但你了解吗? 实际上它的圆角实际效果是应用照片完成的. 有兴趣爱好的盆友能够去科学研究1下.


纯编码完成的小圆角

下列是我本人的1点提议, 期待对你有协助.

何时应用纯编码制做圆角边框?

你迫使编码的工作能力胜于图型.
你追求完美更快的网页页面显示信息速率, 即使是寥寥无几的区别.
在模版或主题中应用.
何时应用照片制做圆角边框?

你迫使图型的工作能力胜于编码.
你不在意所差不几的网页页面显示信息速率, 更重视直观和维护保养便捷.
在文章内容或其它动态性內容中应用.

实际上也很简易, 下面剖析1下, 也许之后会有效.

1. 做1个直角的 DIV, 给他画上边框. (下列照片都以左上角为例)

2. 在 DIV 內部画第2个 DIV, 情况色与网页页面情况色调同样.

3. 将第2个 DIV 移到界限上, 使它能与网页页面情况联接, 这样看上去就像1个缺角的框框.

4. 在第2个 DIV 内画第3个 DIV, 在这里实际上便是1点.

5. 将第3个 DIV 移到右下角的部位, Done.

关键流程解读了之后看来1个详细的事例：

CSS Code拷贝內容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">   
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">   
  4. <head profile="http://gmpg.org/xfn/11">   
  5.  <meta http-equiv="Content-Type" content="text/html; charset=UTF⑻" />   
  6.  <title>纯 CSS 打造圆角</title>   
  7.   
  8.  <style>   
  9. <!--   
  10. body {   
  11.  padding-top:200px;   
  12. }   
  13.   
  14. /* 框 */  
  15. #sg-feedback {   
  16.  background:#EFF7CE;   
  17.  border:1px solid #9ECD62;   
  18.  font-size:12px;   
  19.  margin:0pt auto;   
  20.  text-align:center;   
  21.  width:200px;   
  22. }   
  23. #sg-feedback div .dot {   
  24.  background:#9ECD62;   
  25. }   
  26. #sg-feedback .inner {   
  27.  margin:5px 0pt;   
  28. }   
  29.   
  30. /* 上边角 */  
  31. .yshp_rnd .rnd_top * {   
  32.  display:block;   
  33.  background:#FFFFFF;   
  34.  overflow:hidden;   
  35. }   
  36. .yshp_rnd .rnd_top * * {   
  37.  background:#DE650A;   
  38. }   
  39. .yshp_rnd {   
  40.  position:relative;   
  41. }   
  42. .yshp_rnd .rnd_top .west {   
  43.  position:absolute;   
  44.  height:2px;   
  45.  left:-1px;   
  46.  top:-1px;   
  47.  width:2px;   
  48. }   
  49. .yshp_rnd .rnd_top .west .dot {   
  50.  position:relative;   
  51.  height:1px;   
  52.  left:1px;   
  53.  top:1px;   
  54.  width:1px;   
  55. }   
  56. .yshp_rnd .rnd_top .east {   
  57.  position:absolute;   
  58.  height:2px;   
  59.  rightright:-1px;   
  60.  top:-1px;   
  61.  width:2px;   
  62. }   
  63. .yshp_rnd .rnd_top .east .dot {   
  64.  position:relative;   
  65.  height:1px;   
  66.  left:0pt;   
  67.  top:1px;   
  68.  width:1px;   
  69. }   
  70.   
  71. /* 下边角 */  
  72. .yshp_rnd .rnd_bot * {   
  73.  display:block;   
  74.  background:#FFFFFF;   
  75.  overflow:hidden;   
  76. }   
  77. .yshp_rnd .rnd_bot * * {   
  78.  background:#DE650A;   
  79. }   
  80. .yshp_rnd .rnd_bot .west {   
  81.  position:absolute;   
  82.  bottombottom:-1px !important;   
  83.  bottombottom:-2px;   
  84.  height:2px;   
  85.  left:-1px;   
  86.  width:2px;   
  87. }   
  88. .yshp_rnd .rnd_bot .west .dot {   
  89.  position:relative;   
  90.  height:1px;   
  91.  left:1px;   
  92.  top:0pt;   
  93.  width:1px;   
  94. }   
  95. .yshp_rnd .rnd_bot .east {   
  96.  position:absolute;   
  97.  bottombottom:-1px !important;   
  98.  bottombottom:-2px;   
  99.  height:2px;   
  100.  rightright:-1px;   
  101.  width:2px;   
  102. }   
  103. .yshp_rnd .rnd_bot .east .dot {   
  104.  position:relative;   
  105.  height:1px;   
  106.  left:0pt;   
  107.  top:0pt;   
  108.  width:1px;   
  109. }   
  110. -->   
  111.  </style>   
  112. </head>   
  113.   
  114. <body>   
  115.  <div id="sg-feedback" class="yshp_rnd">   
  116.   
  117.   <div class="rnd_top">   
  118.    <div class="west">   
  119.     <div class="dot"></div>   
  120.    </div>   
  121.    <div class="east">   
  122.     <div class="dot"></div>   
  123.    </div>   
  124.   </div>   
  125.   
  126.   <div class="inner">Hello, World!</div>   
  127.   
  128.   <div class="rnd_bot">   
  129.    <div class="west">   
  130.     <div class="dot"></div>   
  131.    </div>   
  132.    <div class="east">   
  133.     <div class="dot"></div>   
  134.    </div>   
  135.   </div>   
  136.   
  137.  </div>   
  138. </body>   
  139. </html>  

最后实际效果以下图所示:

上一篇：营销推广型网站要怎样搞好 返回下一篇：没有了