HTML+CSS3設置圓角邊框、圓形
電腦網頁編纂器
CSS3屬性：border-radius方式/步調
- 1
打開本身的網頁編纂器新建HTML文件模板
- 2
編寫第一種常用的圓角樣式：同時設置四個角為圓角
HTML代碼：<div class="demo1"></div>
CSS代碼：width: 200px; height: 50px; background-color: crimson; border-radius: 15px;
- 3
編寫第二種常用的圓角樣式：設置肆意角為圓角
HTML代碼：<div class="demo2"></div>
CSS代碼：width: 200px; height: 50px; background-color: crimson; border-radius: 20px 50px 20px 50px;
- 4
編寫第三種常用的圓角樣式：圓形
HTML代碼：<div class="demo2"></div>
CSS代碼：width: 200px; height: 200px; background-color: crimson;?
border-radius: 50%;
- 5
編寫第四種常用的圓角樣式：橢圓
HTML代碼：<div class="demo4"></div>
CSS代碼：width: 200px; height: 150px; background-color: crimson;?
border-radius: 50px/75px;
- 6
編寫第四種常用的圓角樣式：零丁設置某一個角
HTML代碼：<div class="demo5"></div>
CSS代碼：width: 200px; height: 150px; background-color: crimson;?
border-top-left-radius: 20px;
border-top-right-radius: 40px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 50px;
- 發表于 2019-08-07 00:17
- 閱讀 ( 773 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章