Rumah > Artikel > hujung hadapan web > Apakah tiga kesan sempadan baharu yang ditambahkan pada css3?
Apakah tiga kesan sempadan baharu yang ditambahkan pada css3?
- 青灯夜游asal
- 2022-04-25 16:30:352349semak imbas
Tiga kesan sempadan baharu ditambahkan pada CSS3: 1. Imej sempadan "imej sempadan", yang boleh menambah imej latar belakang pada sempadan 2. Sudut bulat sempadan "jejari sempadan", yang boleh menambah satu atau lebih Kesan sudut bulat; 3. Bayang sempadan "bayang-kotak", yang boleh menambah satu atau lebih bayang pada kotak elemen.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
CSS3 menambah tiga kesan sempadan baharu
| 属性 | 说明 | CSS |
|---|---|---|
| border-image | 设置所有边框图像的速记属性。 | 3 |
| border-radius | 一个用于设置所有四个边框- *-半径属性的速记属性 | 3 |
| box-shadow | 附加一个或多个下拉框的阴影 | 3 |
1. Imej sempadan "imej sempadan"
sifat imej sempadan boleh menambah imej latar belakang pada sempadan. Versi terkini semua penyemak imbas utama kini menyokong atribut imej sempadan.
Sintaks:
Penerangan:
atribut imej sempadan perlu mentakrifkan 3 aspek kandungan.
(1) Laluan imej.
(2) Lebar pemotongan: Lebar pemotongan empat sisi, iaitu bahagian atas, bahagian kanan, bahagian bawah dan bahagian kiri (mengikut arah jam).
(3) Kaedah jubin: Terdapat 3 nilai iaitu repeat, round dan stretch.
Dalam semua contoh dalam bahagian ini, kami menggunakan gambar 90px×90px yang ditunjukkan dalam gambar sebagai imej latar belakang sempadan.
Contoh kod:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div
{
width:210px;
height:150px;
border:30px solid gray;
border-image:url(img/border.png) 30 repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Pratonton penyemak imbas adalah seperti yang ditunjukkan di bawah.
Analisis:
Daripada kesan pratonton, kita boleh tahu bahawa nombor 1, 3, 7, 9 terletak di 4 penjuru masih Patuh terletak di 4 penjuru. Kemudian 4 sempadan 2, 4, 6, dan 8 akan dijubin secara berterusan.
Untuk atribut imej sempadan, kami meringkaskannya seperti berikut:
(1) Semasa membuat imej latar belakang sempadan, 4 sisi perlu dibuat, dan bahagian tengah perlu dilubangkan .
(2) Lebar setiap sisi imej latar belakang sempadan hendaklah sama dengan lebar sempadan yang sepadan (iaitu lebar sempadan).
2 Sudut bulat sempadan "jejari sempadan"
Atribut jejari sempadan boleh menambah kesan sudut bulat pada sempadan
border-radius mentakrifkan jejari sudut elemen Melalui atribut jejari sempadan CSS, gaya "bucu bulat" mana-mana elemen boleh dicapai.Sintaks:
border-radius: none ｜ length{1,4} [/ length{1,4}Setiap nilai boleh dalam bentuk nilai berangka atau peratusan. panjang/panjang Panjang pertama mewakili jejari dalam arah mendatar, dan yang kedua mewakili jejari dalam arah menegak. Jika ia adalah nilai, maka empat nilai di kiri atas, kanan atas, kanan bawah dan kiri bawah adalah sama. Jika terdapat dua nilai, maka kiri atas dan kanan bawah adalah sama dan merupakan nilai pertama, dan kanan atas dan kiri bawah adalah sama dan merupakan nilai kedua.
Jika terdapat tiga nilai, maka nilai pertama adalah untuk menetapkan atas-kiri, dan nilai kedua adalah atas-kanan dan bawah-kiri dan mereka akan sama, dan nilai ketiga adalah untuk tetapkan bahagian bawah-kanan.
Selain singkatan di atas, anda juga boleh menulis empat penjuru secara berasingan seperti sempadan, seperti berikut:
border-top-left-radius: //左上角 border-top-right-radius: //右上角 border-bottom-right-radius: //右下角 border-bottom-left-radius: //左下角masing-masing Jejari mendatar dan menegak Apabila nilai kedua diabaikan, jejari mendatar dan menegak adalah sama.
jejari sempadan hanya menyokong format sintaks standard jejari sempadan dalam versi penyemak imbas berikut: Firefox4.0, Safari5.0, Google Chrome 10.0, Opera 10.5 dan IE9 Untuk penyemak imbas yang lebih lama, jejari sempadan perlu berdasarkan Kernel penyemak imbas yang berbeza menambah awalan yang berbeza Sebagai contoh, kernel Mozilla perlu menambah "-moz", manakala kernel Webkit perlu menambah "-webkit", dll. Walau bagaimanapun, IE dan Opera tidak mempunyai format peribadi, jadi dalam untuk memaksimumkan keserasian penyemak imbas , kami perlu menetapkannya seperti berikut:
-webkit-border-radius: 10px 20px 30px; -moz-border-radius: 10px 20px 30px; border-radius: 10px 20px 30px;
Sila tulis borang standard selepas borang peribadi penyemak imbas.
Contoh:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="刘艳">
<title></title>
<style>
img {
border-radius: 30px;
margin: 100px;
}
</style>
</head>
<body>
<img src="../images/photo.jpg" style="max-width:90%" alt="Apakah tiga kesan sempadan baharu yang ditambahkan pada css3?" >
</body>
</html>
3. Bayang-bayang sempadan
Dalam CSS, anda boleh menggunakan atribut bayang-kotak untuk mencapai kesan bayang-bayang sempadan Atribut bayang-bayang kotak boleh menetapkan satu atau lebih kotak bayang lungsur.Sintaks
box-shadow: h-shadow v-shadow blur spread color inset;
Nilai yang mungkin:
| 值 | 说明 |
|---|---|
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
box-shadow属性的使用
1、水平垂直偏移为0也可以有阴影
如果offset-x或offset-y值为0，则阴影在元素背后，此时给blur-radius值或spread值可以产生阴影效果。
例子：
第一个div通过设置blur-radius产生阴影效果。
第二个div通过设置spread正值产生阴影效果。
第三个div通过设置spread负值产生阴影效果。
但是有一点要注意：扩展阴影必须和阴影模糊半径配合使用。
我个人觉得应该是没有配合使用这一说，但不可能只设置扩展阴影，因为扩展阴影和阴影模糊的取值都可以为正。如果只有扩展阴影的话，会被浏览器当做模糊阴影来解析，所以也可以简单理解为“扩展阴影必须和阴影模糊半径配合使用”，如果只用扩展阴影，可以写成：box-shadow:0 0 0 1px;。
<style type="text/css">
div{
width: 100px;
height: 100px;
margin:50px;
border: 10px dotted pink;
display: inline-block;
}
.blur{
box-shadow: 0 0 20px ;
/*box-shadow: 0 0 20px green;*/ /*也可以自定义颜色*/
}
.spread-positive{
box-shadow: 0 0 20px 5px ;
/* box-shadow: 0 0 20px 5px green;*/ /*也可以自定义颜色*/
}
.spread-negative{
box-shadow: 0 0 20px -5px ;
/* box-shadow: 0 0 20px -5px green;*/ /*也可以自定义颜色*/
}
</style>
<body>
<div class="blur"></div>
<div class="spread-positive"></div>
<div class="spread-negative"></div>
</body>
2、设置水平垂直偏移得到阴影效果
outset情况：水平垂直偏移为0，但是不设置blur和spread，看不到阴影，因为此时box-shadow的周长和border-box一样，所以可以通过设置偏移让阴影显示出来。
inset情况：水平垂直偏移为0，不设置blur和spread，同样看不到阴影，因为此时box-shadow的周长和padding-box一样，同样可通过设置偏移让阴影显示出来。
例子:
<style type="text/css">
div{
width: 100px;
height: 100px;
margin:50px;
border: 10px dotted pink;
display: inline-block;
}
.shadow0{box-shadow: 0 0;}
.shadow1{box-shadow: 1px 1px;}
.shadow10{box-shadow: 10px 10px;}
.inset-shadow0{box-shadow: 0 0 inset;}
.inset-shadow1{box-shadow: 1px 1px inset;}
.inset-shadow10{box-shadow: 10px 10px inset;}
</style>
<body>
<div class="shadow0"></div>
<div class="shadow1"></div>
<div class="shadow10"></div>
<div class="inset-shadow0"></div>
<div class="inset-shadow1"></div>
<div class="inset-shadow10"></div>
</body>
3、投影方式
投影方式默认是outset，即外部投影，可设置inset让向内投影。
例子：第一个div默认outset，第二个设置inset，第三个同时设置两个阴影可以更好的看到outset和inset的关系，第四个div可以看出inset阴影在背景之上，内容之下。
<style type="text/css">
div{
width: 100px;
height: 100px;
margin:50px;
border: 10px dotted pink;
display: inline-block;
vertical-align: top;
}
.outset{
box-shadow: 10px 10px teal;
}
.inset{
box-shadow: 10px 10px teal inset;
}
.double{
box-shadow: 10px 10px teal inset,10px 10px teal;
}
.bg{
background-color: yellow;
}
</style>
<body>
<div class="outset"></div>
<div class="inset"></div>
<div class="double"></div>
<div class="inset bg">inset阴影在背景之上，内容之下</div>
</body>
4、如果元素同时指定border-radius属性，则阴影呈现相同的圆角。
<style type="text/css">
div{
width: 100px;
height: 100px;
margin:50px;
border: 10px dotted pink;
display: inline-block;
border-radius: 50px;
}
.shadow{
box-shadow: 0 0 10px 10px green;
}
</style>
<body>
<div class="shadow"></div>
</body>
Atas ialah kandungan terperinci Apakah tiga kesan sempadan baharu yang ditambahkan pada css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!