Rumah > hujung hadapan web > html tutorial > 纯CSS实现圆角效果_html/css_WEB-ITnose

纯CSS实现圆角效果_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:49:21
asal
1351 orang telah melayarinya

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>纯CSS实现圆角效果</title><style type="text/css">.yg{background:#9bd1fa;}.rtop,.rbottom {display:block;background:#fff;}.rtop b,.rbottom b{display:block;height:1px;overflow:hidden;background:#9bd1fa;}.r1 {margin:0 4px;}.r2{margin:0 3px;}.r3{margin:0 2px;}.rtop .r4,.rbottom .r4{margin:0 1px;height:2px;}</style></head><body>    <div class="yg">        <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>        1<br />        没有图片纯CSS实现圆角<br />      <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>    </div></body></html>
Salin selepas log masuk

  

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan