Rumah > hujung hadapan web > html tutorial > css3 border-radius_html/css_WEB-ITnose

css3 border-radius_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:43:39
asal
1077 orang telah melayarinya

前缀对应浏览器

前缀

浏览器

-webkit

chrome和safari

-moz

firefox

-ms

IE

-o

opera

 

border-radius:

<style type="text/css">div.circle{    height:100px;/*与width设置一致*/    width:100px;    background:#9da;    border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/    }div.same{    height:100px;    width:50px;    background:#9da;}.semi-circle{     border-radius:50px 0 0 50px;    }.test{    border-radius: 50% 0 0 50%;}   </style><body><div class="circle"></div><br/><div class="same semi-circle "></div><br/><div class="same test"></div></body>
Salin selepas log masuk

可见设置50%和设置50px这样的固定值还是有差别的,没研究百分比以什么为参考,所以现在不知道怎样通过百分比设置一个左半圆。

 

参考:

https://css-tricks.com/almanac/properties/b/border-radius/

 

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