Comment puis-je supprimer uniquement la partie supérieure de la boîte de l'ombre?
Je suis en utilisant border-radius
et box-shadow
de faire une lueur autour d'un élément.
Puis-je enlever seulement la partie supérieure de la box-shadow
?
div {
margin-top: 25px;
color: #fff;
height: 45px;
margin-top: -5px;
z-index: -10;
padding: 26px 24px 46px;
font-weight: normal;
background: #000; /*#fff;*/
border-top: 0px solid #e5e5e5;
border-left: 1px solid #e5e5e5;
border-right: 1px solid #e5e5e5;
border-bottom: 1px solid #e5e5e5;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
-khtml-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
-moz-box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
box-shadow: rgba(200,200,200,0.7) 0px 0px 10px 0px;
}
Edit: ce petit truc est le problème!
- votre css est de travail
- Voici une filiale unproffesional et laid solution qui devrait être utilisé par personne et fonctionne: jsfiddle.net/kL8tR/55 j'ai juste caché la bordure supérieure en vertu d'une position absolue élément noir.
- Il n'est pas couvrant l'ensemble du haut-frontière. Sur grand écran, la moitié seulement de cela.
Vous devez vous connecter pour publier un commentaire.
Cela fonctionne, mais j'avoue ne pas savoir si il ya une meilleure façon (ou si c'est possible sans l'ajout d'un élément wrapper). À l'aide de plusieurs
box-shadow
s serait une bonne idée, mais je n'arrive pas à faire la même apparence.Voir: http://jsfiddle.net/thirtydot/8qEUc/3/
HTML:
CSS:
margin
). Comparaison: i.stack.imgur.com/89In6.png. Je suis probablement trop difficile, et souvent ne pas avoir à travailler sur un gradient (ou variable) de fond.5px
nombre. C'est ce que je reçois pour ne pas tester avec Firefox en arrière quand j'ai posté ma réponse!Puisque vous utilisez box-shadow, vous pouvez utiliser des pseudo-élément afin de créer et de le placer sous votre div, de le placer de sorte que seules les pièces nécessaires serait visible: http://jsfiddle.net/kL8tR/60/
Il y a quelques remarques importantes:
z-index: -1
position: relative
et pas dez-index
Pseudo-éléments + CSS3 = awesomeness 🙂
z-index: -1
: jsfiddle.net/nottrobin/kL8tR/61.:before
ne fonctionne pas dans IEs < 8 - caniuse.com/#search=:before - mais comme vous le dites, nous sommes à l'aide debox-shadow
de toute façon - caniuse.com/#search=box-shadow.:before
élément: jsfiddle.net/nottrobin/kL8tR/62@milo; est pas de votre bord supérieur c'est un
shadow
que vous donnez dans votre codepour enlever le haut de l'éclat, vous devez définir l'espacement vertical de votre ombre.
Écrire ceci dans votre ombre css:
& vous pouvez générer à partir d'ici http://css3generator.com/
REMARQUE: il y a quatre propriétés de l'ombre sont
horizontal, vertical, blur & spread
pour l'intérieur de l'ombre vous pouvez définir
inset
pour ellebox-shadow
est encore peu visible, et les coins arrondis en haut n'est pas tout regarder à droite (dans Chrome au moins).Vous pouvez essayer ce qui suit. Ma méthode utilise uniquement les CSS.
Exemple De Lien : http://jsfiddle.net/kL8tR/56/
Fondamentalement, ce que je fais, je suis la création de multi-couche d'ombres, de sorte que la première ombre des superpositions de la deuxième couche de masquage de la section supérieure.
J'ai utilisé cette avant, ici, c'est ma référence :
Regarder en vertu de l'article - la Superposition de multiples ombres [ http://www.css3.info/preview/box-shadow/ ]
vous pouvez simplement décalage de l'ombre en bas (déplacement vertical) et de réduire l'ombre de rayon, quelque chose le long des lignes de (remplacez l'astérisque avec le nombre de pixels nécessaires pour juste couvrir le dessus de l'ombre avec la boîte elle-même):
Si vous utilisez un écart négatif de rayon et de calibrer les autres paramètres en fonction de ce que vous cherchez, il devrait vous donner l'effet désiré.
CSS Zone d'Ombre Négative Rayon de Propagation
CSS:
HTML: