h2>用border-radius實現半圓
h2>
<
ul class
="clearfix"
>
<
li class
="circle1"
>上邊圓
li>
<
li class
="circle2"
>左邊圓
li>
<
li class
="circle3"
>下邊圓
li>
<
li class
="circle4"
>左邊圓
li>
<
li class
="circle5"
>全圓
li>
ul>
<
hr>
<
h2>css3的clip 方法剪裁實現半圓
h2>
<
p style
="color: red;"
>clip 屬性剪裁絕對定位元素。也就是說，只有 position:absolute 的時候才是生效的。唯一合法的形狀值是：rect (top, right, bottom, left)
p>
<
ul class
="clearfix"
style
="position: relative;"
>
<
li class
="demo"
>左半圓
li>
<
li class
="demo right-circle"
>右半圓
li>
<
li>
li>
ul>
div>
body
>
html
>
效果圖：
感興趣的朋友可以去熟試下！！！
css3畫花瓣 border radius的妙用
css3中新增的 border radius 屬性在前端開發工作中，一般是還有從來做乙個簡單的圓角效果，看起來讓塊狀元素更加圓潤柔和一點，百分之九十的同學可能用到的就是這個層級，但是 border radius 的功能遠不止於此。首先要明白的是 border radius 的使用方法 classna...
CSS3清除浮動3種方法
浮動這裡要好好琢磨一下，挺麻煩，但是不難。問題 如果乙個父容器，兩個子容器div，兩個子容器為了顯示，乙個左浮動，乙個右浮動，兩個子容器都脫離了文件流，造成父容器沒有元素，這種情況下該怎麼做？問題如下圖 兩種方法 1，在兩個div後再設定乙個div，並且不設定寬高 寬高為0 然後清除上面兩個div浮...
兩種方法實現CSS垂直居中
方法一 利用行高line height line height通常是用於調節一段文字的行與行之間的距離，或者說兩行文字之間的距離，如果外部容器高度是100px 設定line height 100px 可以實現垂直居中。但是用它來實現垂直居中，也是有缺點的，就是如果內容過多，文字就會跑到下一行，那麼內...