CSS дахь дотоод сүүдэр. CSS Сүүдрийн сунгах радиус дахь дотоод сүүдэр
Тогтмол сүүдэр нь хайрцаг-сүүдэр эсвэл текст-сүүдэр ашиглан хэрэгжүүлэхэд хялбар байдаг. Гэхдээ дотоод сүүдэр хийх шаардлагатай бол яах вэ? Энэ нийтлэлд эдгээр сүүдрийг хэдхэн мөр кодоор хэрхэн хийх талаар тайлбарласан болно.
Синтакс
Эхлээд CSS дээр сүүдрийг хэрэгжүүлэх хоёр үндсэн аргыг авч үзье.хайрцаг-сүүдэр
Дизайн хайрцаг-сүүдэрхэд хэдэн өөр утгатай:
Хэвтээ офсетТэгээд босоо офсет- хэвтээ ба босоо нүүлгэн шилжүүлэлт. Эдгээр утгууд нь тухайн объект сүүдэрээ аль чиглэлд тусгахыг заана.
Бүдгэрүүлэх радиусТэгээд тархалтын радиусарай илүү төвөгтэй. Ялгаа нь юу юм? Хоёр элемент бүхий жишээг авч үзье, энд утгууд байдаг бүдэгрэх радиусялгаатай:
Сүүдрийн ирмэг нь зүгээр л бүдгэрсэн байна. Өөр өөр үнэт зүйлсээр тархалтын радиусбид дараахь зүйлийг харж байна.
Энэ тохиолдолд сүүдэр нь том талбайд тархсан байгааг бид харж байна. Хэрэв та утгыг заагаагүй бол бүдэгрэх радиусТэгээд тархалтын радиус, тэгвэл тэдгээр нь 0-тэй тэнцүү байх болно.
текст-сүүдэр
Синтакс нь маш төстэй юм хайрцаг-сүүдэр:
Утга нь ойролцоо боловч тийм биш тархсан сүүдэр. Хэрэглээний жишээ:
Хайрцаг-сүүдэрт оруулах
Объект доторх сүүдрийг "эрвүүлэх" тулд та нэмэх хэрэгтэй оруулах CSS дээр:
Хайрцаг-сүүдрийн үндсэн синтаксийг ойлгосны дараа дотоод сүүдрийг хэрхэн хэрэгжүүлэхийг ойлгоход маш хялбар болно. Утга нь ижил хэвээр байгаа тул та өнгө нэмж болно (RGB зургаан өнцөгт):
Өнгө нь RGB форматтай, альфа утга нь сүүдрийн ил тод байдлыг хариуцдаг.
Сүүдэртэй зургууд
Зурган дээр дотоод сүүдэр нэмэх нь ердийн сүүдэр нэмэхээс арай илүү хэцүү байдаг див. Эхлэхийн тулд ердийн зургийн код энд байна: 
Та иймэрхүү сүүдэр нэмж болно гэж үзэх нь логик юм.
Img ( хайрцаг-сүүдэр: оруулах 0px 0px 10px rgba(0,0,0,0.5); )
Гэхдээ сүүдэр харагдахгүй байна:
Энэ асуудлыг шийдэх хэд хэдэн арга байдаг бөгөөд тус бүр нь давуу болон сул талуудтай байдаг. Тэдгээрийн хоёрыг харцгаая. Эхнийх нь зургийг ердийн байдлаар боох явдал юм див:
Div (өндөр: 200px; өргөн: 400px; хайрцаг-сүүдэр: оруулах 0px 0px 10px rgba(0,0,0,0.9); ) img (өндөр: 200px; өргөн: 400px; байрлал: харьцангуй; z-индекс: -2 ;)
Бүх зүйл ажилладаг, гэхдээ бид бага зэрэг нэмэлт HTML болон CSS тэмдэглэгээг нэмэх хэрэгтэй. Хоёрдахь арга бол зургийг хүссэн блокийн арын дэвсгэр болгон тохируулах явдал юм.
Div (өндөр: 200px; өргөн: 400px; дэвсгэр: url(http://lorempixum.com/400/200/transport/2); хайрцаг-сүүдэр: 0px 0px 10px rgba(0,0,0,0.9); )
Дотоод сүүдрийг ашиглахад ийм зүйл тохиолдож болно.
Текст-сүүдэрт оруулах
Текстийн дотоод сүүдрийг хэрэгжүүлэхийн тулд код руу нэмэхэд л хангалттай оруулахАжиллахгүй байна:
Шийдвэрлэхийн тулд эхлээд толгой хэсэгт хэрэглэнэ h1Харанхуй дэвсгэр болон цайвар сүүдэр тохируулах:
H1 (арын өнгө: #565656; өнгө: ил тод; текст сүүдэр: 0px 2px 3px rgba(255,255,255,0.5); )
Энд юу болох вэ:
Нууц найрлагыг нэмж байна дэвсгэр клипЭнэ нь текстээс хэтэрсэн бүх зүйлийг тасалдаг (харанхуй дэвсгэр дээр):
H1 (арын дэвсгэр өнгө: #565656; өнгө: ил тод; текст-сүүдэр: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text ;)
Энэ нь бидэнд яг хэрэгтэй зүйл болсон. Одоо бид текстийг бага зэрэг харанхуйлж (альфа), үр дүн нь:
Хуудасны блок элементийн доорх сүүдэрийг ихэвчлэн гурван хэмжээст эффект үүсгэх, тухайн элементэд анхаарлаа хандуулах эсвэл дизайны нэг хэсэг болгон ашигладаг. Элементүүдийн доорх жижиг сүүдэр нь хуудасны хэмжээ, гүнийг өгдөг.
Сүүдэр нэмэхийн тулд зөвхөн хоёр нь шаардлагатай зургаан утгатай box-shadow шинж чанарыг ашиглана. Зураг дээр. Зураг 1-д хайрцаг-сүүдрийн шинж чанарыг бүх боломжит утгуудын хамт дугаарлаж, тэдгээрийг тодорхойлохын тулд харуулав.
Цагаан будаа. 1. Box-shadow шинж чанарын утгууд
- inset түлхүүр үг нь элементийн доторх сүүдрийг тогтоодог;
- сүүдрийг хэвтээ чиглэлд шилжүүлэх (5px - баруун, -5px - зүүн);
- босоо шилжилт (5px - доош, -5px - дээш);
- сүүдрийн бүдэгрэх радиус (0 - хурц сүүдэр);
- сүүдэр сунгах (5px - сунгах, -5px - агшилт);
- сүүдрийн өнгө.
Зөвхөн хэвтээ ба босоо шилжилтийг зааж өгөх шаардлагатай бөгөөд бусад бүх параметрүүдийг анхдагчаар авна. Энэ тохиолдолд сүүдэр нь бүдэг ба харгүй тод байх болно.
Өөр өөр параметрүүд болон тэдгээрийн утгыг нэгтгэснээр та олон төрлийн сүүдэр авах боломжтой. Хүснэгтэнд 1 нь код болон түүний хүргэж буй үр дүнг харуулж байна.
| Код | Үр дүн | Тодорхойлолт |
|---|---|---|
| хайрцаг-сүүдэр: 5px 5px; | Баруун болон доод талд хурц сүүдэр. | |
| хайрцаг-сүүдэр: -5px -5px; | Зүүн ба дээд талд хурц сүүдэр. | |
| хайрцаг-сүүдэр: 0 0 5px; | Элементийн эргэн тойронд бүдгэрсэн сүүдэр. | |
| хайрцаг-сүүдэр: 0 0 5px 2px; | Сүүдрийг 2 пикселээр томруулна уу. | |
| хайрцаг-сүүдэр: 0 0 5px 2px улаан; | Элементийн эргэн тойронд улаан гэрэлтдэг. | |
| хайрцаг-сүүдэр: 0.4em 0.4em 5px rgba(122,122,122,0.5); | Тунгалаг сүүдэр. | |
| хайрцаг-сүүдэр: 0 0 6px оруулах; | Дотор сүүдэр. |
Хүснэгтээс харахад сүүдрийн шилжилтийг пикселээр зааж өгөх шаардлагагүй, гэхдээ энэ нь тохиромжтой. Сүүдрийн өнгийг ямар ч боломжтой форматаар тодорхойлж болно; жишээлбэл, тунгалаг сүүдэр авахын тулд RGBA формат тохиромжтой; ийм сүүдэр нь ямар ч дэвсгэр дээр сайн харагдах болно. Жишээ 1 нь үүнийг хэрхэн хийхийг харуулж байна.
Жишээ 1: Арын дэвсгэр зураг дээрх сүүдэр
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Дайсны тугуудыг төгс эмх цэгцтэй байхад нь бүү эсэргүүц; дайсны хуаранг үл давшгүй үед бүү дайр; Энэ бол өөрчлөлтийн менежмент юм.
Сун Цзу, транс. Николай Конрад
Энэ жишээний үр дүнг Зураг дээр үзүүлэв. 2. Сүүдэр нь блокны булангийн дугуйралтыг дагадаг.
Цагаан будаа. 2. Арын дэвсгэр зураг дээр сүүдэр харагдах байдал
"Өргөн" сүүдэр нэмэх үед энэ нь хөтчийн цонхны харагдах хязгаараас хэтэрч, хэвтээ гүйлгэх мөр гарч ирэхэд хүргэж болзошгүйг анхаарна уу.
Псевдо-элементүүдэд сүүдэр нэмж болно; энэ нь заримдаа нарийн төвөгтэй байршилд шаардлагатай байдаг. Зураг дээр. Зураг 3-т сүүдэр нэмсэн толгойн блокыг үзүүлэв. Уулзвар дээр ямар нэгэн зураас гарахгүйн тулд ::after псевдо-элементийг ашиглаж, түүнд сүүдэр нэмэх шаардлагатай.
Цагаан будаа. 3. Сүүдэртэй блок
Жишээ 2 нь ийм блок үүсгэхийг харуулж байна.
Жишээ 2. Сүүдэртэй блок
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Гарчиг
Элемент нь нэгээс олон сүүдэртэй байж болох ч нэг дор хэд хэдэн сүүдэртэй байж болно; тэдгээрийн параметрүүдийг box-shadow шинж чанарын утгад таслалаар тусгаарлан жагсаасан болно. Жишээ 3 нь бүх зураг дээр давхар сүүдэр хэрхэн нэмэхийг харуулж байна.
Жишээ 2. Сүүдэртэй блок
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Энэ жишээний үр дүнг Зураг дээр үзүүлэв. 4.
Цагаан будаа. 4. Давхар сүүдэртэй зураг
Эхний сүүдэр нь зургийн зүүн талд 20 пикселийн бүдэгрэх радиустай харагдана, хэмжээ нь дөрөв дэх параметрээр (-20px) багассан. Хоёрдахь сүүдрийн параметрүүдийг аравтын бутархайн дараа зааж өгсөн бөгөөд сүүдэр нь зургийн баруун талд харагдах ба тэгш хэмийн хувьд багассан байна.
Тогтмол сүүдэр нь хайрцаг-сүүдэр эсвэл текст-сүүдэр ашиглан хэрэгжүүлэхэд хялбар байдаг. Гэхдээ дотоод сүүдэр хийх шаардлагатай бол яах вэ? Энэ нийтлэлд эдгээр сүүдрийг хэдхэн мөр кодоор хэрхэн хийх талаар тайлбарласан болно.
Синтакс
Эхлээд CSS дээр сүүдрийг хэрэгжүүлэх хоёр үндсэн аргыг авч үзье.хайрцаг-сүүдэр
Дизайн хайрцаг-сүүдэрхэд хэдэн өөр утгатай:
Хэвтээ офсетТэгээд босоо офсет- хэвтээ ба босоо нүүлгэн шилжүүлэлт. Эдгээр утгууд нь тухайн объект сүүдэрээ аль чиглэлд тусгахыг заана.
Бүдгэрүүлэх радиусТэгээд тархалтын радиусарай илүү төвөгтэй. Ялгаа нь юу юм? Хоёр элемент бүхий жишээг авч үзье, энд утгууд байдаг бүдэгрэх радиусялгаатай:
Сүүдрийн ирмэг нь зүгээр л бүдгэрсэн байна. Өөр өөр үнэт зүйлсээр тархалтын радиусбид дараахь зүйлийг харж байна.
Энэ тохиолдолд сүүдэр нь том талбайд тархсан байгааг бид харж байна. Хэрэв та утгыг заагаагүй бол бүдэгрэх радиусТэгээд тархалтын радиус, тэгвэл тэдгээр нь 0-тэй тэнцүү байх болно.
текст-сүүдэр
Синтакс нь маш төстэй юм хайрцаг-сүүдэр:
Утга нь ойролцоо боловч тийм биш тархсан сүүдэр. Хэрэглээний жишээ:
Хайрцаг-сүүдэрт оруулах
Объект доторх сүүдрийг "эрвүүлэх" тулд та нэмэх хэрэгтэй оруулах CSS дээр:
Хайрцаг-сүүдрийн үндсэн синтаксийг ойлгосны дараа дотоод сүүдрийг хэрхэн хэрэгжүүлэхийг ойлгоход маш хялбар болно. Утга нь ижил хэвээр байгаа тул та өнгө нэмж болно (RGB зургаан өнцөгт):
Өнгө нь RGB форматтай, альфа утга нь сүүдрийн ил тод байдлыг хариуцдаг.
Сүүдэртэй зургууд
Зурган дээр дотоод сүүдэр нэмэх нь ердийн сүүдэр нэмэхээс арай илүү хэцүү байдаг див. Эхлэхийн тулд ердийн зургийн код энд байна:
Та иймэрхүү сүүдэр нэмж болно гэж үзэх нь логик юм.
Img ( хайрцаг-сүүдэр: оруулах 0px 0px 10px rgba(0,0,0,0.5); )
Гэхдээ сүүдэр харагдахгүй байна:
Энэ асуудлыг шийдэх хэд хэдэн арга байдаг бөгөөд тус бүр нь давуу болон сул талуудтай байдаг. Тэдгээрийн хоёрыг харцгаая. Эхнийх нь зургийг ердийн байдлаар боох явдал юм див:
Div (өндөр: 200px; өргөн: 400px; хайрцаг-сүүдэр: оруулах 0px 0px 10px rgba(0,0,0,0.9); ) img (өндөр: 200px; өргөн: 400px; байрлал: харьцангуй; z-индекс: -2 ;)
Бүх зүйл ажилладаг, гэхдээ бид бага зэрэг нэмэлт HTML болон CSS тэмдэглэгээг нэмэх хэрэгтэй. Хоёрдахь арга бол зургийг хүссэн блокийн арын дэвсгэр болгон тохируулах явдал юм.
Div (өндөр: 200px; өргөн: 400px; дэвсгэр: url(http://lorempixum.com/400/200/transport/2); хайрцаг-сүүдэр: 0px 0px 10px rgba(0,0,0,0.9); )
Дотоод сүүдрийг ашиглахад ийм зүйл тохиолдож болно.
Текст-сүүдэрт оруулах
Текстийн дотоод сүүдрийг хэрэгжүүлэхийн тулд код руу нэмэхэд л хангалттай оруулахАжиллахгүй байна:
Шийдвэрлэхийн тулд эхлээд толгой хэсэгт хэрэглэнэ h1Харанхуй дэвсгэр болон цайвар сүүдэр тохируулах:
H1 (арын өнгө: #565656; өнгө: ил тод; текст сүүдэр: 0px 2px 3px rgba(255,255,255,0.5); )
Энд юу болох вэ:
Нууц найрлагыг нэмж байна дэвсгэр клипЭнэ нь текстээс хэтэрсэн бүх зүйлийг тасалдаг (харанхуй дэвсгэр дээр):
H1 (арын дэвсгэр өнгө: #565656; өнгө: ил тод; текст-сүүдэр: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text ;)
Энэ нь бидэнд яг хэрэгтэй зүйл болсон. Одоо бид текстийг бага зэрэг харанхуйлж (альфа), үр дүн нь:
Та box-shadow CSS шинж чанарыг ашиглан элементүүдэд сүүдэр нэмж, харагдах байдлыг нь өөрчилж болно. Энэ хэв маяг нь блокийн хэмжээ, гурван хэмжээст байдал гэх мэт сонирхолтой эффектүүдийг хэрэгжүүлэх боломжийг олгодог. Энэ өмчийг орчин үеийн бүх хөтөч дэмждэг. Үл хамаарах зүйл бол IE8 болон Opera Mini юм.
box-shadow шинж чанар: синтакс
Энэ хэв маягийг дараах байдлаар бичнэ.
Хайрцаг-сүүдэр: оруулах 4px 4px 8px 5px #333333;
Параметр бүр юу хариуцах вэ гэдгийг дарааллаар нь авч үзье (зүүнээс баруун тийш):
- Түлхүүр үгоруулах: заавал зааж өгөх шаардлагагүй параметр; сүүдэр зурдаг доторбүрэлдэхүүн.
- X офсет: Элементтэй харьцуулахад сүүдэр нь хэвтээ байрлалтай байх зэргийг заана. Эерэг утга нь баруун тийш, сөрөг - зүүн тийш шилжих гэсэн үг юм. 0 утга нь сүүдрийг нөхөхгүй гэсэн үг.
- Y Shift: Сүүдрийн босоо шилжилтийн хэмжээг заана. Эерэг утга нь доошоо шилжих, сөрөг утга нь дээшээ шилжих гэсэн үг юм. 0-ийн утга нь шилжилтгүй сүүдэр юм.
- Бүдгэрүүлэх радиус: Энэ нь сүүдрийн бүдэгрэх зэрэг юм. Утга өндөр байх тусам сүүдэр бүдэгрэх болно. Хэрэв параметрийг заагаагүй бол анхдагч утга нь 0 байна. Энэ тохиолдолд сүүдэр нь бүрэн тодорхой болно.
- Өргөтгөл: хоёр тэнхлэгийн дагуу сүүдрийг сунгах үүрэгтэй нэмэлт параметр; утга өндөр байх тусам суналт их болно. Өргөтгөл нь өмнөх параметр байгаа тохиолдолд л ажиллана. Өгөгдмөл утга нь 0 байна.
- Сүүдрийн өнгө: энэ параметрээр бүх зүйл тодорхой байна - энэ нь элементийн сүүдрийн өнгийг тогтоодог. Өгөгдмөл өнгө нь хар байна.
Анхаарна уу. Android хөтчүүд болон iPhone Safari-н хуучин хувилбарууд нь зөв ажиллахын тулд box-shadow CSS шинж чанарын хувьд -webkit- угтварыг шаарддаг.
Энэ өмч нь хэд хэдэн бүлгийн утгыг авч болно (нэг зэрэг хэд хэдэн сүүдэр хийх). Үүнийг хийхийн тулд та эдгээр бүлгүүдийг таслалаар тусгаарласан параметрүүдийг жагсаах хэрэгтэй болно. Жишээлбэл:
Хайрцаг-сүүдэр: 15px 15px 20px #8b0163, оруулга 15px 15px 20px #630046;
Хайрцагны сүүдрийн жишээнүүд
CSS box-shadow өмчийн хүч чадал, гоо сайхныг илүү сайн ойлгоход тань туслахын тулд бид танд аюулгүйгээр хэрэгжүүлж болох цөөн хэдэн жишээг үзүүлэх болно. Энэ өмч нь ердийн блокийг ихээхэн өөрчилж чадна!
Хөнгөн сүүдэр
Хайрцаг-сүүдэр: 0 2px 4px rgba(0, 0, 0, .25);
Цаасан эффект
Хайрцаг-сүүдэр: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0, 0, 0, .6), 23px 0 20px -23px rgba(0, 0, 0, .6), 0 0 40px rgba(0, 0, 0, .1) оруулах; 
Олон давхарга
Хайрцаг-сүүдэр: 6px 6px #ccc, 12px 12px #a3a3a3; 
Гурвалсан хүрээ
Хайрцаг-сүүдэр: 0 0 0 7px rgb(118, 46, 177), 0 0 0 14px rgba(118, 46, 177, 0.6), 0 0 0 21px rgba(118, 46, 177, 0.4); 
Булангууд
Хайрцаг-сүүдэр: -20px 20px 0 -17px #eee, 20px -20px 0 -17px #eee, 20px 20px 0 -20px #592385, 0 0 0 2px #592385; 
Таны харж байгаагаар хайрцагны сүүдрийн өмч нь төсөөлөхөд маш их зай үлдээдэг. Та блокуудыг хүссэнээрээ өөрчилж болно - гол зүйл бол пропорциональ мэдрэмжтэй байх явдал юм! 😉
Дараагийн бүлэгт та элементүүдийн хэмжээг тодорхойлдог өргөн ба өндрийн шинж чанаруудыг судлах болно.
Өнөөдөр бид CSS сүүдэрийг зураггүйгээр хэрхэн хийхийг сурах болно. Энэхүү зааварчилгааг дуусгасны дараа танд CSS сүүдэр үүсгэгч хэрэггүй болно.
CSS3 ашиглан бүтээгдсэн сүүдрийн гол давуу тал нь хэрэгжүүлэхэд хялбар, серверт хандах хүсэлтийн тоог багасгах явдал юм (бид зураг ашиглахаа больсон). CSS сүүдэр хийхийн тулд бидэнд div таг болон CSS box-shadow шинж чанар хэрэгтэй. Бид үндсэн объектын ард (анги бүхий div) байрлуулах :after болон :before псевдо элементүүдийг үүсгэх тул танд нэмэлт тэмдэглэгээ хийх шаардлагагүй болно. блок).
Бид CSS3 сүүдэр үүсгэх HTML кодыг харна уу:
Агуулга
Дараа нь та бэлэн жишээнүүд болон тэдгээрийг хэрэгжүүлэхэд шаардагдах кодыг харж болно. Хуудас дээрх текстийг багасгахын тулд бид хөтөчийн угтвар бүхий CSS шинж чанарыг орхих болно. Бүрэн кодыг жишээнд тохирох "Жишээ" холбоос дээр дарж харж болно.
.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хүрээ-радиус:4px; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-2; доод: 15px; зүүн: 10px ; өргөн:50%; өндөр:20%; хамгийн их өргөн:300px; хайрцаг-сүүдэр:0 15px 10px rgba(0, 0, 0, 0.7); хувиргах: эргүүлэх (-3deg); ) .block:дараа (баруун :10px; зүүн: автомат; хувиргах: эргүүлэх (3 градус); )
.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) оруулах; border:1px хатуу #efefef; border-radius:0 0 120px 120px / 0 0 6px 6px; ) .block:before, .block:after (content:""; position:absolute ; z-индекс:-2; доод: 12 пиксел; зүүн: 10 пиксел; өргөн: 50%; өндөр: 55%; хамгийн их өргөн: 200 пиксел; хайрцаг-сүүдэр: 0 8px 12px rgba(0, 0, 0, 0.5); хувиргах: хазайх (-8 градус) эргүүлэх (-3 градус); ) .блок: дараа (баруун: 10 пиксел; зүүн: автомат; хувиргах: хазайлт (8 градус) эргүүлэх (3 градус); )
Сүүдэр ашиглан та блокийн хэтийн төлөвийг өгч болно. Жишээ харна уу.
.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-2; ) .block:өмнө ( зүүн: 80px; доод: 5px ; өргөн:50%; өндөр:35%; хамгийн их өргөн:200px; хайрцаг-сүүдэр:-80px 0 8px rgba(0, 0, 0, 0.4); хувиргах: хазайлт (50deg); хувиргах эх: 0 100% ; ) .block:дараа (дэлгэц: байхгүй; )
Өргөгдсөн блокийн CSS сүүдэр. Жишээ харна уу.
.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) оруулах; хайрцаг-сүүдэр: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0) , 0, 0, 0.1) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-2; )
Босоо атираат блокийн CSS3 сүүдэрийн жишээ. Жишээ харна уу.
.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-2; ) .block:өмнө ( дээд:10px; доод:10px ; зүүн:0; баруун:50%; хайрцаг-сүүдэр:0 0 15px rgba(0,0,0,0.6); хүрээ-радиус:10px / 100px; )
.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-2; ) .block:өмнө ( дээд:10px; доод:10px ; зүүн:0; баруун:0; хайрцаг-сүүдэр:0 0 15px rgba(0,0,0,0.6); хүрээ-радиус:10px / 100px; )
Хэвтээ атираат блокийн CSS3 сүүдэрийн жишээ. Жишээ харна уу.
.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-2; ) .block:өмнө ( дээд:50%; доод: 0px; зүүн: 10px; баруун: 10px; хайрцаг-сүүдэр: 0 0 15px rgba(0,0,0,0.6); хилийн радиус: 100px / 10px; )
.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba( 0, 0, 0, 0.1) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-2; ) .block:өмнө ( дээд: 0px; доод: 0px ; зүүн: 10 пиксел; баруун: 10 пиксел; хайрцаг-сүүдэр: 0 0 15 пиксел rgba (0,0,0,0,6); хилийн радиус: 100px / 10px; )
Эргүүлсэн блокт зориулсан CSS3 сүүдэр. Жишээ харна уу.
.block (байрлал:харьцангуй; өргөн:40%; дэвсгэр:1эм; зах:2эм 10px 4em; дэвсгэр:#fff; хүрээ-радиус:4px; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3) , 0 0 40px rgba(0, 0, 0, 0.1) оруулах; хайрцаг-сүүдэр: байхгүй; хувиргах: эргүүлэх (-3deg); ) .block > :first-child:before ( агуулга:""; байрлал: үнэмлэхүй; z-индекс:-1; дээд:0px; доод:0; зүүн:0; баруун:0px; дэвсгэр:#fff; хайрцаг-сүүдэр:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba (0, 0, 0, 0.1) оруулах; ) .block:өмнө, .block:дараа ( агуулга:""; байрлал: үнэмлэхүй; z индекс:-2; доод: 15px; зүүн: 10px; өргөн: 50% ; өндөр:20%; хамгийн их өргөн:300px; хайрцаг-сүүдэр:0 15px 10px rgba(0, 0, 0, 0.7); хувиргах: эргүүлэх (-3deg); ) .block:дараа (баруун:10px; зүүн: автомат; хувиргах: эргүүлэх (3 градус); )