CSS3邊框美化

2021-09-14 04:12:48 字數 1090 閱讀 7830

1.邊框圓角border-radius

單個寫法:

border-top-left-radius:水平半徑 垂直半徑;

border-top-left-radius: 60px 120px;

border-top-right-radius: 60px 120px;

border-bottom-right-radius: 60px 120px;

border-bottom-left-radius: 60px 120px;

復合寫法:

border-radius:水平半徑,垂直半徑;

border-radius: 60px 60px 60px 60px/120px 120px 120px 120px;

border-radius: 60px/120px;

2.圓角應用

a)單位:百分百和畫素(最好用%)

border-radius: 100px;

border-radius: 50%;

b) 製作扇形:(左上開始順時針賦值,若當前沒賦值,取對角的值)border-radius:200px 0 0 0;

3.盒子陰影

box-shadow:水平位移、垂直位移、模糊程度、陰影大小、顏色

box-shadow: 3px 3px 3px 3px red insert;內陰影需要加上insert,**影預設

4.邊框

a)邊框屬性 border-image-source: url(「1.jpg」);

b)邊框裁剪 border-image-slice:50 50 50 50;

c) 邊框寬度 border-image-width: 27px;

d)邊框平鋪 border-image-repeat: round/repeat/stretch;

(repeat正常平鋪可能會顯示不完全,round平鋪保證完整,stretch:拉伸顯示)

CSS3美化背景與邊框

background color屬性用於設定網頁背景顏色,background color屬性接受任何任何有效的顏色值,預設背景顏色為透明 transparent 語法格式如下 background image none url url 屬性值 描述repeat 背景水平和垂直方向都重複平鋪 rep...

css 科技 邊框 CSS3 邊框

css3 邊框 css3 邊框 通過 css3,您能夠建立圓角邊框,向矩形新增陰影,使用來繪製邊框 並且不需使用設計軟體,比如 photoshop。在本章中,您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...

css 科技 邊框 CSS3 邊框

css3 邊框 css3 邊框 通過 css3,您能夠建立圓角邊框,向矩形新增陰影,使用來繪製邊框 並且不需使用設計軟體,比如 photoshop。在本章中,您將學到以下邊框屬性 border radius box shadow border image 瀏覽器支援 internet explore...