Πώς να φτιάξετε μια σκιά στη μία πλευρά css. Εσωτερικές σκιές στο CSS
Περιγραφή
Προσθέτει μια σκιά σε ένα στοιχείο. Είναι δυνατή η χρήση πολλών σκιών, υποδεικνύοντας τις παραμέτρους τους διαχωρισμένες με κόμματα κατά την εφαρμογή σκιών, η πρώτη σκιά στη λίστα θα είναι υψηλότερη, η τελευταία χαμηλότερη. Εάν έχει καθοριστεί μια ακτίνα στρογγυλοποίησης για ένα στοιχείο μέσω της ιδιότητας border-radius, τότε η σκιά θα έχει επίσης στρογγυλεμένες γωνίες. Η προσθήκη μιας σκιάς αυξάνει το πλάτος του στοιχείου, επομένως μια οριζόντια γραμμή κύλισης μπορεί να εμφανιστεί στο πρόγραμμα περιήγησης.
Σύνταξη
κουτί-σκιά: κανένα |<тень> [,<тень>]*
Οπου<тень>:
ένθεση<сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>
Αξίες
κανένας Ακυρώνει την προσθήκη σκιάς. ένθετο Η σκιά σχεδιάζεται μέσα στο στοιχείο. Προαιρετική παράμετρος. x μετατόπιση Η οριζόντια μετατόπιση της σκιάς σε σχέση με το στοιχείο. Μια θετική τιμή αυτής της παραμέτρου μετατοπίζει τη σκιά προς τα δεξιά, μια αρνητική τιμή τη μετατοπίζει προς τα αριστερά. Απαιτούμενη παράμετρος. y μετατόπιση Η κατακόρυφη μετατόπιση της σκιάς σε σχέση με το στοιχείο. Μια θετική τιμή μετατοπίζει τη σκιά προς τα κάτω, μια αρνητική τιμή τη μετατοπίζει προς τα πάνω. Απαιτούμενη παράμετρος. blur Ορίζει την ακτίνα θαμπώματος της σκιάς. Όσο υψηλότερη είναι αυτή η τιμή, τόσο περισσότερο η σκιά εξομαλύνεται, γίνεται πιο φαρδιά και πιο ανοιχτή. Εάν αυτή η παράμετρος δεν έχει καθοριστεί, η προεπιλογή ορίζεται σε 0, γεγονός που θα κάνει τη σκιά ευκρινή και όχι θολή. stretch Μια θετική τιμή τεντώνει τη σκιά, μια αρνητική τιμή, αντίθετα, τη συμπιέζει. Εάν αυτή η παράμετρος δεν έχει καθοριστεί, η προεπιλογή είναι 0, κάτι που θα κάνει τη σκιά να έχει το ίδιο μέγεθος με το στοιχείο. χρώμα Το χρώμα της σκιάς σε οποιαδήποτε διαθέσιμη μορφή CSS, η προεπιλεγμένη σκιά είναι μαύρη. Προαιρετική παράμετρος.Είναι δυνατό να καθοριστούν πολλές σκιές, διαχωρίζοντας τις παραμέτρους τους με κόμμα. Λαμβάνεται υπόψη η ακόλουθη σειρά: η πρώτη σκιά στη λίστα τοποθετείται στην κορυφή, η τελευταία στη λίστα βρίσκεται στο κάτω μέρος.
HTML5 CSS3 IE Cr Op Sa Fx
Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 1.
Ρύζι. 1. Σκιώδης προβολή στο πρόγραμμα περιήγησης Safari
Προγράμματα περιήγησης
Το Safari πριν από την έκδοση 5.1, το Chrome πριν από την έκδοση 10.0, το Android πριν από την έκδοση 4.0 και το iOS Safari πριν από την έκδοση 5.0 υποστηρίζουν την ιδιότητα -webkit-box-shadow.
Ο Firefox πριν από την έκδοση 4.0 υποστηρίζει την ιδιότητα -moz-box-shadow.
Ο Internet Explorer πριν από την έκδοση 9.0 δεν υποστηρίζει την ιδιότητα box-shadow, μπορείτε να χρησιμοποιήσετε την ιδιότητα μη τυπικού φίλτρου:
Φίλτρο: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);
Εδώ: offX - οριζόντια μετατόπιση σκιάς. offY — κάθετη μετατόπιση σκιάς. χρώμα — χρώμα σκιάς.
Η εφαρμογή του φίλτρου σκιάς δημιουργεί μια καθαρή, ευκρινή σκιά, ώστε να μπορείτε να χρησιμοποιήσετε το φίλτρο σκιάς για ένα εφέ θαμπώματος.
Φίλτρο: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, force=10);
Εδώ: κατεύθυνση — γωνία κατεύθυνσης σκιάς από 0 έως 360°. χρώμα — χρώμα σκιάς. δύναμη — μετατόπιση σκιάς σε pixel.
Η ιδιότητα box-shadow CSS σάς επιτρέπει να ορίσετε μια σκιά για ένα στοιχείο html. Χρησιμοποιείται αρκετά συχνά από τους σχεδιαστές ιστοτόπων για να διακοσμήσουν και να τονίσουν με κάποιο τρόπο τα πλαίσια με κείμενο, εικόνες και να κάνουν το περιεχόμενο πιο ευανάγνωστο.
CSS πλαίσιο-σκιά σύνταξη
... κουτί-σκιά : X Y R1 R2 χρώμα ; ...
- X - μετατόπιση κατά μήκος του άξονα Χ (οριζόντια)
- Y - μετατόπιση κατά μήκος του άξονα Y (κάθετη)
- R1 - θόλωση (όσο υψηλότερη είναι η τιμή, τόσο πιο ομαλή είναι η μετάβαση)
- R2 - ακτίνα επέκτασης (αν είναι θετική, τεντώνεται, αρνητική, συμπιέζει)
- χρώμα - χρώμα (μπορεί να καθοριστεί σε οποιαδήποτε μορφή: #RGB, όνομα χρώματος)
- inset - εάν υπάρχει αυτή η τιμή, η σκιά θα βρίσκεται μέσα στο μπλοκ (στοιχείο)
Παράδειγμα 1. Πλαίσιο HTML με πλαίσιο-σκιά χωρίς μετατόπιση
Παρακάτω είναι ο απλούστερος τρόπος χρήσης μιας σκιάς χρησιμοποιώντας την ιδιότητα CSS box-shadow σε μια σελίδα html, όταν τυλίγεται ομοιόμορφα γύρω από ολόκληρο το πλαίσιο χωρίς μετατόπιση.
Пример №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 добавляет элементу одну или более теней. Тень представляет собой копию элемента, смещенную на указанное расстояние. Тени бывают внешние или внутренние, размытые или плоские, они могут следовать контурам блоков со скругленными углами. С помощью ключевого слова inset создаются тени внутри элемента, делая элемент визуально объёмным или вдавленным.
Как сделать тень блока с помощью свойства box-shadow
Поддержка браузерами
IE: 9.0
Edge: 12.0
Firefox: 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Android Browser: 4.0, 2.1 -webkit-
1. Синтаксис свойства box-shadow
Каждая тень принимает от одного до пяти параметров: горизонтальное смещение, вертикальное смещение, радиус размытия (необязательное значение), радиус распространения (необязательное значение) и цвет тени. Тени не влияют на компоновку и могут перекрывать соседние элементы или их тени. Свойство не наследуется.
Рис. 1. Синтаксис свойства box-shadow
| Значения: | |
| x-offset | Обязательное значение. Смещение тени по горизонтали относительно блока. Может принимать как положительные, так и отрицательные значения, положительное смещает тень вправо от блока, отрицательное – влево. |
| y-offset | Обязательное значение. Смещение тени по вертикали относительно блока. Может принимать как положительные, так и отрицательные значения, положительное смещает тень вниз, отрицательное — вверх. |
| blur | Необязательное значение. Определяет радиус размытия тени. Чем больше радиус, тем сильнее размыта тень. Можно использовать только положительные значения. |
| растяжение | Необязательное значение, расширяет тень, утолщая ее сплошную часть между размытыми краями. Принимает как положительные, так и отрицательные значения, задаётся в единицах длины — px и т.д. |
| цвет | Необязательное значение. По умолчанию тень черного цвета. Для установления значения можно использовать следующие форматы записи цвета: #RRGGBB , rgb(red, green, blue) , rgba(red, green, blue, alpha) . Для Safari цвет тени указывать обязательно. |
| inset | Создаёт тень внутри блока. |
| none | Значение по умолчанию, означает отсутствие тени. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
2. Примеры тени для блока
2.1. Внутренняя тень
.example-shadow-1 { background: #e6e3df; text-align: center; } .example-shadow-1 span { margin: 50px; height: 100px; width: 200px; display: inline-block; box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1); }
2.2. Плоская тень с одной стороны
flat
flat
.example-shadow-2 { background: beige; text-align: center; } .example-shadow-2 a { display: inline-block; border-radius: 5px; padding: 15px 35px; font-size: 22px; margin: 20px; color: white; background: #55acee; box-shadow: 0 5px 0 #3C93D5; } .example-shadow-2 a:hover { background: #6FC6FF; }С появлением стандарта CSS 3 введено свойство box-shadow , которое получило широкое применение среди веб-разработчиков, так как оно позволяет с легкостью добавить одну или несколько теней к блоку элемента для придания желаемого визуального эффекта.
В предыдущий статье мы с Вами рассматривали свойство border-radius , используя его, вы можете получить тень с закругленными углами. По аналогии с текстовой тенью (text-shadow), вы сможете создавать множественные тени, они наносятся по z-оси спереди назад (с первой заданной тенью сверху).
Давайте детально рассмотрим синтаксис этого современного свойства:
Рассмотрим по порядку возможные значения этого свойства:
| Значение | Описание |
|---|---|
| none | Тень не отображается. Это значение по умолчанию. |
| inset | Необязательное значение. Если это значение не указано (по умолчанию), то тень будет снаружи элемента и создаст эффект выпуклости элемента. При наличие ключевого слова (значения) inset , тень будет падать внутри элемента и создаст эффект вдавленности. Другими словами, это изменение от наружной тени к внутренней. |
| h-shadow | Обязательное значение. Задаёт расположение горизонтальной тени. Допускается использование отрицательных значений. |
| v-shadow | Обязательное значение. Задаёт расположение вертикальной тени. Допускается использование отрицательных значений. |
| blur-radius | Необязательное значение. Задаёт радиус размытия. Чем больше это значение, тем больше размытие, при этом тень становится больше и светлее. Если значение не задано, то значение будет равно 0 (резкие - отчетливые тени). Отрицательные значения не допускаются. |
| spread-radius | Необязательное значение. Размер тени (радиус растяжения тени). При положительных значениях тень будет расшииряться, а при отрицательных сжиматься. Если значение не задано, то значение будет равно 0 (тень соответствует размеру элемента). |
| color | Необязательное значение. Определяет цвет тени (HEX, RGB, RGBA, HSL, HSLA, "Предопределённые цвета "). Значением по умолчанию является черный. |
Основные моменты, которые вам необходимо понять, чтобы создавать тени для элементов:
Хочу обратить Ваше внимание на то, что свойство box-shadow в настоящее время поддерживается всеми современными браузерами:
| Свойство | Opera | IExplorer | Edge |
|||
|---|---|---|---|---|---|---|
| box-shadow | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
Если Вы хотите расширить поддержку некоторых браузеров, включая мобильныx IOS 3.2 - 4.3 и Android 2.1 - 3 , то рекомендуется использовать префиксы производителей и использовать следующий синтаксис (в примерах статьи будет использован синтаксис только для современных браузеров):
-webkit-box-shadow : значение ; /* Safari 3.1 - 4, IOS 3.2 - 4.3 и Android 2.1 - 3 */ -moz-box-shadow : значение ; /* Firefox 3.5 - 3.6 */ box-shadow : значение ; /* таблица выше */Перейдем к практике и начнем с простого примера, в котором добавим по одной тени к элементам:
Το αποτέλεσμα του παραδείγματός μας:
Χρήση πολλαπλών σκιών
Στο παρακάτω παράδειγμα, προτείνω να εξετάσουμε το ενδιαφέρον αποτέλεσμα ανάμειξης χρωμάτων που μπορεί να επιτευχθεί όταν χρησιμοποιείτε πολλαπλές σκιές:
- Δύομπλοκ σταθερού πλάτους και ύψους (15em και 10em), προστέθηκε επένδυση σε όλες τις πλευρές (2em) και ρυθμίστε τα μπλοκ σε γραμμή μπλοκ για να μπορείτε να τα ευθυγραμμίσετε.
- Για πρώταμπλοκ με τάξη .δοκιμήυποδείξαμε τέσσερασκιές με διαφορετικές οριζόντιες και κάθετες τιμές σκιάς, έτσι ώστε το στοιχείο να έχει διαφορετικές σκιές σε όλες τις πλευρές. Η ακτίνα θαμπώματος για όλες τις σκιές ορίστηκε στην ίδια. Το χρώμα κάθε σκιάς είναι διαφορετικό και καθορίζεται χρησιμοποιώντας προκαθορισμένα χρώματα.
- Για δεύτεροςμπλοκ με τάξη .τεστ2υποδείξαμε τέσσερασκιές με διαφορετικές οριζόντιες και κάθετες τιμές σκιάς. Η ακτίνα θαμπώματος για όλες τις σκιές ορίστηκε στην ίδια, ενώ η διάταση σκιάς ορίστηκε αρνητική, γεγονός που οδήγησε σε μείωση της ίδιας της σκιάς. Το χρώμα κάθε σκιάς είναι διαφορετικό και καθορίζεται χρησιμοποιώντας το σύστημα RGBA.
Το αποτέλεσμα του παραδείγματός μας:
Χρήση σκιών για εικόνες
Το τελευταίο παράδειγμα αυτού του άρθρου θα επικεντρωθεί στη χρήση σκιών για εικόνες. Θα ήθελα να επιστήσω αμέσως την προσοχή σας στο γεγονός ότι μπορείτε να καθορίσετε απευθείας τη σκιά για το στοιχείο HTML Δεν θα λειτουργήσει, αλλά έχουμε την ευκαιρία να καθορίσουμε μια εικόνα ως φόντο για το στοιχείο που μας ενδιαφέρει και, στη συνέχεια, να αντιστοιχίσουμε τη σκιά που χρειαζόμαστε σε αυτό το στοιχείο.
Θα εξετάσουμε λεπτομερώς την εργασία με εικόνες φόντου στο άρθρο του σχολικού βιβλίου "", και τώρα, για να βάλουμε ένα τέλος στη μελέτη της χρήσης σκιών, θα το αγγίξουμε επιφανειακά και θα χρησιμοποιήσουμε την εικόνα ως φόντο σε ένα στοιχείο στο παρακάτω παράδειγμα:
- Δύομπλοκ σταθερού πλάτους και ύψους (237 εικονοστοιχεία και 232 εικονοστοιχεία), προστέθηκαν περιθώρια για όλες τις πλευρές (2em) και ορίστε τα μπλοκ σε γραμμή μπλοκ για να μπορείτε να τα ευθυγραμμίσετε. Ορίσαμε το μέγεθος του μπλοκ 237 px επί 232 px στο μέγεθος της εικόνας, έτσι ώστε σε αυτό το στάδιο εκπαίδευσης δεν χρειαζόταν να κλιμακώσουμε την εικόνα για να ταιριάζει στο στοιχείο και να επηρεάσουμε εκείνες τις ιδιότητες CSS που σχεδιάζεται να μελετηθούν σε μεταγενέστερο στάδιο ( στο άρθρο του σχολικού βιβλίου " ").
- Για πρώταμπλοκ με τάξη .δοκιμήΚαθορίσαμε μια μηδενική τιμή για την οριζόντια και την κατακόρυφη σκιά, αλλά ταυτόχρονα καθορίσαμε μια ακτίνα θολώματος 50 εικονοστοιχείων και την επεκτείναμε ορίζοντας μια ακτίνα τεντώματος 10 εικονοστοιχείων. Το χρώμα της σκιάς υποδείχθηκε με ένα προκαθορισμένο χρώμα (βιολετί). Επιπλέον, καθορίσαμε την ένθετη λέξη-κλειδί στη δήλωση, η οποία κάνει τη σκιά να πέσει μέσα στο στοιχείο. Με άλλα λόγια, έχουμε δημιουργήσει μια εσωτερική σκιά του στοιχείου.
- Για δεύτεροςμπλοκ με τάξη .τεστ2Καθορίσαμε μια μηδενική τιμή για την οριζόντια και την κατακόρυφη σκιά, αλλά ταυτόχρονα καθορίσαμε μια ακτίνα θολώματος 50 εικονοστοιχείων και την επεκτείναμε ορίζοντας μια ακτίνα τεντώματος 10 εικονοστοιχείων. Το χρώμα της σκιάς καθορίζεται σε λειτουργία RGBA.
Το αποτέλεσμα του παραδείγματός μας:
Ρύζι. 98 Παράδειγμα χρήσης σκιών για εικόνες σε CSS (ιδιότητα box-shadow)
Ερωτήσεις και εργασίες για το θέμα
Πριν προχωρήσετε στο επόμενο θέμα, ολοκληρώστε την εργασία εξάσκησης:
Εάν δυσκολεύεστε να ολοκληρώσετε την εξάσκηση, μπορείτε πάντα να ανοίξετε το παράδειγμα σε ξεχωριστό παράθυρο και να επιθεωρήσετε τη σελίδα για να κατανοήσετε ποιος κώδικας CSS χρησιμοποιήθηκε.
2016-2019 Denis Bolshakov, μπορείτε να στείλετε σχόλια και προτάσεις σχετικά με το έργο του ιστότοπου στο [email protected]
Προσθέτει μια σκιά σε ένα στοιχείο. Είναι δυνατή η χρήση πολλών σκιών, υποδεικνύοντας τις παραμέτρους τους διαχωρισμένες με κόμματα κατά την εφαρμογή σκιών, η πρώτη σκιά στη λίστα θα είναι υψηλότερη, η τελευταία χαμηλότερη. Εάν έχει καθοριστεί μια ακτίνα στρογγυλοποίησης για ένα στοιχείο μέσω της ιδιότητας border-radius, τότε η σκιά θα έχει επίσης στρογγυλεμένες γωνίες. Η προσθήκη μιας σκιάς αυξάνει το πλάτος του στοιχείου, επομένως μπορεί να εμφανιστεί μια οριζόντια γραμμή κύλισης στο πρόγραμμα περιήγησης.
σύντομες πληροφορίες
Σύνταξη
Κουτί-σκιά: κανένα |<тень> [,<тень>]*
Οπου<тень>:
ένθεση<сдвиг по x> <сдвиг по y> <размытие> <растяжение> <цвет>
Ονομασίες
| Περιγραφή | Παράδειγμα | |
|---|---|---|
| <тип> | Υποδεικνύει τον τύπο της τιμής. | <размер> |
| Α & & Β | Οι τιμές πρέπει να εξάγονται με τη σειρά που καθορίζεται. | <размер> && <цвет> |
| A | σι | Υποδεικνύει ότι πρέπει να επιλέξετε μόνο μία τιμή από τις προτεινόμενες (A ή B). | κανονικό | μικρά καπάκια |
| Α || σι | Κάθε τιμή μπορεί να χρησιμοποιηθεί ανεξάρτητα ή μαζί με άλλες με οποιαδήποτε σειρά. | πλάτος || μετρώ |
| Ομαδικές αξίες. | [ καλλιέργεια || σταυρός] | |
| * | Επαναλάβετε μηδέν ή περισσότερες φορές. | [,<время>]* |
| + | Επαναλάβετε μία ή περισσότερες φορές. | <число>+ |
| ? | Ο καθορισμένος τύπος, λέξη ή ομάδα είναι προαιρετική. | ένθεση; |
| (Α, Β) | Επαναλάβετε τουλάχιστον Α, αλλά όχι περισσότερες από Β φορές. | <радиус>{1,4} |
| # | Επαναλάβετε μία ή περισσότερες φορές χωρισμένες με κόμμα. | <время># |
Αξίες
κανένας Ακυρώνει την προσθήκη σκιάς. ένθετο Η σκιά σχεδιάζεται μέσα στο στοιχείο.<сдвиг по x>Η οριζόντια μετατόπιση της σκιάς σε σχέση με το στοιχείο. Μια θετική τιμή αυτής της παραμέτρου ορίζει τη μετατόπιση της σκιάς προς τα δεξιά, μια αρνητική τιμή - προς τα αριστερά.<сдвиг по y>Η κατακόρυφη μετατόπιση της σκιάς σε σχέση με το στοιχείο. Μια θετική τιμή μετατοπίζει τη σκιά προς τα κάτω, μια αρνητική τιμή τη μετατοπίζει προς τα πάνω.<размытие>Ορίζει την ακτίνα θαμπώματος σκιάς. Όσο υψηλότερη είναι αυτή η τιμή, τόσο περισσότερο εξομαλύνεται η σκιά, γίνεται πιο φαρδιά και ελαφρύτερη. Εάν αυτή η παράμετρος δεν έχει καθοριστεί, ορίζεται από προεπιλογή στο 0 και η σκιά θα είναι ευκρινή και όχι θολή.<растяжение>Μια θετική τιμή τεντώνει τη σκιά, μια αρνητική τιμή, αντίθετα, τη συμπιέζει. Εάν αυτή η παράμετρος δεν έχει καθοριστεί, η προεπιλογή είναι 0, κάτι που θα κάνει τη σκιά να έχει το ίδιο μέγεθος με το στοιχείο.<цвет>Χρώμα σκιάς σε οποιαδήποτε διαθέσιμη μορφή CSS, η προεπιλεγμένη σκιά είναι μαύρη.
Είναι δυνατό να καθοριστούν πολλές σκιές, διαχωρίζοντας τις παραμέτρους τους με κόμμα. Λαμβάνεται υπόψη η ακόλουθη σειρά: η πρώτη σκιά στη λίστα τοποθετείται στην κορυφή, η τελευταία στη λίστα βρίσκεται στο κάτω μέρος.
Παράδειγμα
Το αποτέλεσμα του παραδείγματος φαίνεται στο Σχ. 1.
Ρύζι. 1. Τύπος σκιάς
Μοντέλο αντικειμένου
Ενα αντικείμενο.style.boxShadow
Σημείωση
Το Safari πριν από την έκδοση 5.1, το Chrome πριν από την έκδοση 10.0, το Android πριν από την έκδοση 4.0 υποστηρίζουν την ιδιότητα -webkit-box-shadow.
Ο Firefox πριν από την έκδοση 4.0 υποστηρίζει την ιδιότητα -moz-box-shadow.
Ο Internet Explorer πριν από την έκδοση 9.0 δεν υποστηρίζει την ιδιότητα box-shadow, μπορείτε να χρησιμοποιήσετε την ιδιότητα φίλτρου:
Φίλτρο: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);
Εδώ: offX - οριζόντια μετατόπιση σκιάς. offY — κάθετη μετατόπιση σκιάς. χρώμα — χρώμα σκιάς.
Η χρήση του φίλτρου dropshadow δίνει μια καθαρή, ευκρινή σκιά, ώστε να μπορείτε να χρησιμοποιήσετε το φίλτρο σκιάς για ένα εφέ θαμπώματος.
Φίλτρο: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, force=10);
Εδώ: κατεύθυνση — γωνία κατεύθυνσης σκιάς από 0 έως 360°. χρώμα — χρώμα σκιάς. δύναμη — μετατόπιση σκιάς σε pixel.
Προσδιορισμός
Κάθε προδιαγραφή περνά από διάφορα στάδια έγκρισης.
- Σύσταση - Η προδιαγραφή έχει εγκριθεί από το W3C και συνιστάται ως πρότυπο.
- Σύσταση υποψηφίου ( Πιθανή σύσταση) - η ομάδα που είναι υπεύθυνη για το πρότυπο είναι ικανοποιημένη που εκπληρώνει τους στόχους της, αλλά απαιτεί βοήθεια από την κοινότητα ανάπτυξης για την εφαρμογή του προτύπου.
- Προτεινόμενη σύσταση Προτεινόμενη σύσταση) - σε αυτό το στάδιο το έγγραφο υποβάλλεται στο Γνωμοδοτικό Συμβούλιο του W3C για τελική έγκριση.
- Εργαζόμενο προσχέδιο - Μια πιο ώριμη έκδοση ενός προσχεδίου που έχει συζητηθεί και τροποποιηθεί για έλεγχο από την κοινότητα.
- προσχέδιο του συντάκτη ( Εκδοτικό προσχέδιο) - μια πρόχειρη έκδοση του προτύπου μετά από αλλαγές που έγιναν από τους συντάκτες του έργου.
- προσχέδιο ( Σχέδιο προδιαγραφών) - η πρώτη πρόχειρη έκδοση του προτύπου.