Menambah bayang pada elemen. Anda boleh menggunakan beberapa bayang, menunjukkan parameternya dipisahkan dengan koma; apabila menggunakan bayang, bayang pertama dalam senarai akan lebih tinggi, yang terakhir lebih rendah. Jika jejari pembulatan ditentukan untuk elemen melalui sifat jejari sempadan, maka bayang-bayang itu juga akan mempunyai bucu bulat. Menambah bayang-bayang meningkatkan lebar elemen, jadi bar skrol mendatar mungkin muncul dalam penyemak imbas.
maklumat ringkas
Sintaks
Bayang kotak: tiada |<тень> [,<тень>]*
di mana<тень>:
sisipan<сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>
Jawatan
| Penerangan | Contoh | |
|---|---|---|
| <тип> | Menunjukkan jenis nilai. | <размер> |
| A && B | Nilai mesti dikeluarkan dalam susunan yang ditentukan. | <размер> && <цвет> |
| A | B | Menunjukkan bahawa anda perlu memilih hanya satu nilai daripada yang dicadangkan (A atau B). | biasa | topi kecil |
| A || B | Setiap nilai boleh digunakan secara berasingan atau bersama-sama dengan yang lain dalam sebarang susunan. | lebar || kira |
| Nilai kumpulan. | [ tanaman || menyeberang ] | |
| * | Ulang sifar atau lebih kali. | [,<время>]* |
| + | Ulang satu kali atau lebih. | <число>+ |
| ? | Jenis, perkataan atau kumpulan yang ditentukan adalah pilihan. | sisipan? |
| (A, B) | Ulang sekurang-kurangnya A, tetapi tidak lebih daripada B kali. | <радиус>{1,4} |
| # | Ulang satu atau beberapa kali dipisahkan dengan koma. | <время># |
Nilai
tiada Membatalkan menambah bayang. inset Bayang-bayang dilukis di dalam elemen.<сдвиг по x>Offset mendatar bayang-bayang berbanding dengan unsur. Nilai positif parameter ini menetapkan anjakan bayang-bayang ke kanan, nilai negatif - ke kiri.<сдвиг по y>Offset menegak bayang-bayang berbanding unsur. Nilai positif menganjak bayang ke bawah, nilai negatif menganjaknya ke atas.<размытие>Menetapkan jejari kabur bayang-bayang. Semakin tinggi nilai ini, semakin banyak bayang-bayang terlicin, menjadi lebih lebar dan lebih terang. Jika parameter ini tidak dinyatakan, ia lalai kepada 0 dan bayang-bayang akan menjadi tajam dan bukannya kabur.<растяжение>Nilai positif meregangkan bayang-bayang, nilai negatif, sebaliknya, memampatkannya. Jika parameter ini tidak dinyatakan, lalai ialah 0, yang akan menyebabkan bayang-bayang menjadi saiz yang sama dengan elemen.<цвет>Warna bayang dalam mana-mana format CSS yang tersedia, bayang lalai adalah hitam.
Adalah mungkin untuk menentukan beberapa bayang-bayang, memisahkan parameternya dengan koma. Susunan berikut diambil kira: bayang pertama dalam senarai diletakkan di bahagian paling atas, yang terakhir dalam senarai berada di bahagian paling bawah.
Contoh
Hasil daripada contoh ditunjukkan dalam Rajah. 1.
nasi. 1. Jenis bayang-bayang
Model objek
Sebuah objek.style.boxShadow
Catatan
Safari sebelum versi 5.1, Chrome sebelum versi 10.0, Android sebelum versi 4.0 menyokong sifat -webkit-box-shadow.
Firefox sebelum versi 4.0 menyokong sifat -moz-box-shadow.
Internet Explorer sebelum versi 9.0 tidak menyokong sifat kotak-bayang; sebaliknya, anda boleh menggunakan sifat penapis:
Penapis: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);
Di sini: offX - mengimbangi bayang mendatar; offY — mengimbangi bayang menegak; warna — warna bayang-bayang.
Menggunakan penapis bayang bayang memberikan bayang yang jelas dan tajam, jadi anda boleh menggunakan penapis bayang untuk kesan kabur.
Penapis: progid:DXImageTransform.Microsoft.shadow(arah=120, warna=#000000, kekuatan=10);
Di sini: arah — sudut arah bayang dari 0 hingga 360°; warna - warna bayang-bayang; kekuatan — bayangan mengimbangi dalam piksel.
Spesifikasi
Setiap spesifikasi melalui beberapa peringkat kelulusan.
- Syor - Spesifikasi telah diluluskan oleh W3C dan disyorkan sebagai standard.
- Syor Calon ( Cadangan yang mungkin) - kumpulan yang bertanggungjawab untuk piawaian berpuas hati bahawa ia memenuhi matlamatnya, tetapi memerlukan bantuan daripada komuniti pembangunan untuk melaksanakan piawaian tersebut.
- Cadangan Cadangan Cadangan Cadangan) - pada peringkat ini dokumen diserahkan kepada Majlis Penasihat W3C untuk kelulusan akhir.
- Draf Kerja - Versi draf yang lebih matang yang telah dibincangkan dan dipinda untuk semakan komuniti.
- Draf editor ( Draf editorial) - versi draf standard selepas perubahan dibuat oleh editor projek.
- Draf ( Spesifikasi draf) - versi draf pertama standard.
Sifat CSS bayang kotak menambah satu atau lebih bayang pada elemen. Untuk menentukan berbilang bayang, anda mesti menambah nilai bayang-bayang tambahan, dipisahkan dengan koma.
Sokongan penyemak imbas
| Harta benda | Opera | IExplorer | Hujung |
|||
|---|---|---|---|---|---|---|
| bayangan kotak | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
Sintaks CSS:
bayang kotak: "tiada| inset h-bayangan v-bayang kabur-jejari-jejari warna sebaran | awal | warisi";Sintaks JavaScript:
Object.style.boxShadow = "10px 5px 5px merah"
Nilai harta
| Maknanya | Penerangan |
|---|---|
| tiada | Bayang-bayang tidak dipaparkan. Ini ialah nilai lalai. |
| sisipan | Nilai pilihan. Jika nilai ini tidak dinyatakan (lalai), bayang-bayang akan berada di bahagian luar elemen dan akan mencipta kesan elemen yang membonjol. Jika kata kunci inset (nilai) hadir, bayang akan jatuh di dalam elemen dan mencipta kesan lekukan. Dalam erti kata lain, ia adalah perubahan daripada bayang luar kepada bayangan dalam. |
| bayang-h | Nilai yang diperlukan. Menetapkan lokasi bayang mendatar. Nilai negatif dibenarkan. |
| bayang-v | Nilai yang diperlukan. Menetapkan lokasi bayang menegak. Nilai negatif dibenarkan. |
| jejari kabur | Nilai pilihan. Menetapkan jejari kabur. Semakin tinggi nilai, semakin besar kekaburan, menjadikan bayang-bayang lebih besar dan lebih terang. Jika nilai tidak dinyatakan, nilai akan menjadi 0 (tajam - bayang-bayang berbeza). Nilai negatif tidak dibenarkan. |
| jejari sebaran | Nilai pilihan. Saiz bayang-bayang (jejari regangan bayang-bayang). Dengan nilai positif bayangan akan mengembang, dan dengan nilai negatif ia akan mengecut. Jika tiada nilai dinyatakan, nilainya ialah 0 (bayangan sepadan dengan saiz elemen). |
| warna | Nilai pilihan. Mentakrifkan warna bayang-bayang (HEX, RGB, RGBA, HSL, HSLA, "Warna pratakrif"). Nilai lalai ialah hitam. |
| Menetapkan harta kepada nilai lalainya. | |
| Menunjukkan bahawa nilai itu diwarisi daripada elemen induk. |
Versi CSS
CSS3diwarisi
Tidak.Bergerak
ya.Contoh penggunaan
Bayang-bayang di bawah elemen blok pada halaman biasanya digunakan untuk mencipta kesan tiga dimensi, untuk menarik perhatian kepada elemen atau sebagai sebahagian daripada reka bentuk. Bayang-bayang kecil di bawah elemen juga memberikan kelantangan dan kedalaman halaman.
Untuk menambah bayang, gunakan sifat kotak-bayang, yang mempunyai enam nilai, hanya dua daripadanya diperlukan. Dalam Rajah. Rajah 1 menunjukkan sifat bayang-kotak dengan semua nilai yang mungkin, bernombor untuk mengenal pastinya.
nasi. 1. Nilai sifat bayang kotak
- kata kunci inset menetapkan bayang di dalam elemen;
- alihkan bayang secara mendatar (5px - kanan, -5px - kiri);
- anjakan menegak (5px - bawah, -5px - atas);
- jejari kabur bayang (0 - bayang tajam);
- regangan bayangan (5px - regangan, -5px - mengecut);
- warna bayang.
Ia adalah perlu untuk menentukan hanya anjakan mendatar dan menegak; semua parameter lain akan diambil secara lalai. Dalam kes ini, bayang-bayang akan menjadi tajam tanpa kabur atau hitam.
Dengan menggabungkan parameter berbeza dan nilainya, anda boleh mendapatkan pelbagai jenis bayang-bayang. Dalam jadual 1 menunjukkan kod dan hasil yang dibawanya.
| Kod | Hasilnya | Penerangan |
|---|---|---|
| bayang kotak: 5px 5px; | Bayang tajam di sebelah kanan dan bawah. | |
| bayang-kotak: -5px -5px; | Bayangan tajam di sebelah kiri dan atas. | |
| bayang kotak: 0 0 5px; | Bayang kabur di sekeliling unsur. | |
| bayang-kotak: 0 0 5px 2px; | Kembangkan bayang-bayang sebanyak 2 piksel. | |
| bayang-kotak: 0 0 5px 2px merah; | Cahaya merah di sekeliling elemen. | |
| bayang kotak: 0.4em 0.4em 5px rgba(122,122,122,0.5); | Bayang lut sinar. | |
| bayang kotak: inset 0 0 6px; | Bayang di dalam. |
Seperti yang dapat dilihat dari jadual, anjakan bayang tidak perlu dinyatakan dalam piksel, walaupun ini mudah. Warna bayang-bayang boleh ditentukan dalam mana-mana format yang tersedia; sebagai contoh, untuk mendapatkan bayang-bayang lut sinar, format RGBA adalah sesuai; bayang-bayang sedemikian akan kelihatan baik pada mana-mana latar belakang. Contoh 1 menunjukkan cara melakukan ini.
Contoh 1: Bayang pada gambar latar belakang
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Jangan melawan panji-panji musuh apabila mereka dalam keadaan sempurna; jangan menyerang kem musuh apabila ia tidak dapat ditembusi; ini adalah pengurusan perubahan.
Sun Tzu, terj. Nikolai Konrad
Hasil daripada contoh ini ditunjukkan dalam Rajah. 2. Bayang-bayang mengikut pembulatan bucu bongkah.
nasi. 2. Kemunculan bayang-bayang pada gambar latar belakang
Apabila menambah bayang-bayang "lebar", ambil perhatian bahawa ia mungkin melangkaui sempadan tetingkap penyemak imbas yang boleh dilihat dan dengan itu menyebabkan bar skrol mendatar muncul.
Bayang-bayang juga boleh ditambah pada elemen pseudo; ini kadangkala diperlukan untuk susun atur yang kompleks. Dalam Rajah. Rajah 3 menunjukkan blok pengepala dengan bayang-bayang ditambah kepadanya. Untuk mengelakkan sebarang garisan di persimpangan, anda perlu menggunakan ::after pseudo-element dan menambah bayang padanya.
nasi. 3. Sekat dengan bayang-bayang
Contoh 2 menunjukkan penciptaan blok sedemikian.
Contoh 2. Sekat dengan bayang-bayang
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Tajuk
Elemen boleh mempunyai lebih daripada satu bayang, tetapi beberapa sekali gus; parameternya disenaraikan dipisahkan dengan koma dalam nilai sifat bayang-kotak. Contoh 3 menunjukkan cara menambah bayang berganda pada semua imej.
Contoh 2. Sekat dengan bayang-bayang
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Hasil daripada contoh ini ditunjukkan dalam Rajah. 4.
nasi. 4. Imej Bayang Berganda
Bayang-bayang pertama dipaparkan di sebelah kiri imej dengan jejari kabur 20px, saiznya dikurangkan dengan parameter keempat (-20px). Parameter bayang kedua ditunjukkan selepas titik perpuluhan; bayang itu dipaparkan di sebelah kanan gambar dan juga dikurangkan untuk simetri.
Sifat kotak-bayang CSS membolehkan anda menetapkan bayang untuk elemen html. Ia digunakan agak kerap oleh pereka laman web untuk menghiasi dan menyerlahkan bingkai dengan teks, imej dan menjadikan kandungan lebih mudah dibaca.
Sintaks kotak-bayang CSS
... bayang kotak : X Y R1 R2 warna ; ...
- X - mengimbangi sepanjang paksi X (mendatar)
- Y - mengimbangi sepanjang paksi Y (menegak)
- R1 - kabur (lebih tinggi nilai, lebih lancar peralihan)
- R2 - jejari sambungan (jika positif, ia meregang, negatif, ia memampatkan)
- warna - warna (boleh dinyatakan dalam sebarang format: #RGB, nama warna)
- inset - jika nilai ini ada, bayang-bayang akan terletak di dalam blok (elemen)
Contoh 1. Bingkai HTML dengan bayangan kotak tanpa mengimbangi
Di bawah ialah cara paling mudah untuk menggunakan bayang menggunakan sifat kotak-bayang CSS pada halaman html, apabila ia membungkus seluruh bingkai secara sekata tanpa anjakan.
Пример №1. Рамка с тенью
Пример №1. Рамка с тенью
Пример 2. HTML рамка со смещенной тенью box-shadow
Практически тот же пример, что и первый, но только со смещением рамки.
Пример №2. Рамка со смещенной тенью
На странице преобразуется в следующее
Пример №2. Рамка со смещенной тенью
Пример №3. Свечение рамки html
Реализация тени в виде свечения
Пример №3. Свечение
На странице преобразуется в следующее
Пример №3. Свечение
Пример 4. Внутреннее свечение границы html
Свечение, которое направлено внутрь блока и никак не выходит за его пределы. Эффект создается за счет атрибута inset .
Пример №4. Внутреннее свечение
На странице преобразуется в следующее
Пример №4. Внутреннее свечение
Пример 5. Совмещение теней в html
Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты. Например, можно сделать разноцветную рамку в стиле 3D.
Пример №5. Совмещение теней
На странице преобразуется в следующее
Пример №5. Совмещение теней
Примечание: старые браузерыIE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow
- -webkit-box-shadow - для Chrome до 10, Safari до 5.1, Android до 4 и iOS до 5
- -moz-box-shadow - для Firefox до версии 4.0
Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.
Синтаксис
Прежде всего рассмотрим два основных способа реализации теней в CSS.box-shadow
Конструкция box-shadow содержит несколько различных значений:
Horizontal offset и vertical offset - горизонтальное и вертикальное смещение соответственно. Эти значения указывают, в какую сторону объект будет отбрасывать тень:
Blur radius и spread radius немного сложнее. В чем их разница? Взглянем на пример с двумя элементами, где значения blur radius отличаются:
Край тени просто размывается. При различном значении spread radius видим следующее:
В этом случае видим, что тень рассеивается на большую площадь. Если не указывать значения blur radius и spread radius , то они будут равны 0.
text-shadow
Синтаксис очень похож на box-shadow :
Значения аналогичные, только нет spread-shadow . Пример использования:
Inset в box-shadow
Чтобы «перевернуть» тень внутрь объекта, необходимо добавить inset в CSS:
Разобравшись с основным синтаксисом box-shadow, понять принципы реализации внутренних теней очень легко. Значения все те же, можно добавить цвет (RGB в hex):
Цвет в формате RGB, альфа-значение отвечает за прозрачность тени:
Изображения с тенями
Добавить внутреннюю тень к изображению немного сложнее, чем к обычному div . Для начала вот обычный код картинки: 
Логично предположить, что добавить тень можно так:
Img { box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); }
Но тень не видно:
Существует несколько способов решить эту проблему, каждый из которых имеет свои плюсы и минусы. Рассмотрим два из них. Первый - это обернуть картинку в обычный div :
Div { height: 200px; width: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); } img { height: 200px; width: 400px; position: relative; z-index: -2; }
Все работает, но приходится добавлять немного лишней разметки HTML и CSS. Второй способ - это установить изображение фоном нужного блока:
Div { height: 200px; width: 400px; background: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); }
Вот, что может получится при использовании внутренних теней:
Inset в text-shadow
Для реализации внутренней тени текста простое добавление в код inset не работает:
Для решения, сначала применим к заголовку h1 установим темный фон и светлую тень:
H1 { background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255,255,255,0.5); }
Вот, что получается:
Добавляем секретный ингредиент background-clip , который обрезает все, что выходит за пределы текста (на темный фон):
H1 { background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; }
Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:
