CSS之shasow(阴影)

参考https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

box-shadow属性向框添加一个或多个阴影。语法先上:

box-shadow: h-shadow v-shadow blur spread color inset;

解释一下:

阴影类型 X轴位移 Y轴位移 阴影大小 阴影扩展 阴影颜色;

其中X和Y是必须选的,其他可选。

在设置box-shadow时可以各式各样,非常漂亮,我们举些栗子:

0.5em 0.5em 0.4em gold, -0.5em 0.5em 0.4em lime, -0.5em -0.5em 0.4em blue;

0 0 0 0.5em;

0 0 1em;

inset 0 -1.1em red;

inset 0 2em 3em -1em green;

0.4em 0.4em 1em olive;

0 1.5em 0.5em -1em olive;

border-radius: 50%; box-shadow: inset 0.3em 0.3em 0.9em black;

冷的锋刃

时间: 2024-08-24 22:03:44

CSS之shasow(阴影)的相关文章

【CSS】圆角阴影边框CSS

.someClassName { width:300px; display: inline-block; padding: 5px 10px 6px; text-decoration: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 2px rgba

酷炫,用Html5/CSS实现文字阴影

前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现.她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想要的样子,其实css3的新功能是很强大的,不要把你的思想太过于局限化,好了,闲话也不多说,咱们就先来看看这个文本阴影. 一.文字阴影text-shadow 文字阴影参数:参数1 : 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 参数2 :第2个长度值用来设置对象的阴影垂直偏移值.可以为负值 参数3 :如果提供了第3个长度值则用来设置对象的阴影模糊值.

css生成彩色阴影

通常用css生成单色或者同色系的的阴影(box-shadow),其实可以通过巧妙的利用 filter: blur 模糊滤镜,可以生成渐变色或者说是颜色丰富的阴影效果,如图: 原理: 利用伪元素,生成一个与原图一样大小的新图叠加在原图之下,然后利用滤镜模糊 filter: blur() 配合其他的亮度/对比度,透明度等滤镜,制作出一个虚幻的影子,伪装成原图的阴影效果. 关键代码: filter: blur(10px) brightness(80%) opacity(.8) 完整示例代码: <!DO

CSS 页面顶部阴影和给浏览器强制加上滚动条

/*给浏览器强制加上滚动条*/ html{height: 101%;} /*页面顶部阴影*/ body:before{ content: ""; position: fixed; top:-10px; left:0; width:100%; height:10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px

css圆角和阴影兼容问题(ie7,ie8)

<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document</title> <style type="text/css"> .box { backgrou

css常用的阴影

一.box-shadow: 0 2px 15px 0 rgba(0,0,0,.15)!important 二. box-shadow: 0 2px 6px 0 rgba(0,0,0,.4); 三. .tofu-block-hover { transition: opacity 0.3s,width 4s,height 4s; border: 1px solid #e7e7e7; padding: 18px; background-color: #fff; position: absolute;

CSS 实现单边阴影

box-shadow: 0px -15px 10px -15px #111; 五个值分别为:x y blur spread color 将 spread 设置成 blur 的负值即可 这种只适用于 offset 和 blur 相差比较小的情况,相差太大的话效果不是很好 see: 1. StackOverflow 2. codepen 原文地址:https://www.cnblogs.com/savokiss/p/8671876.html

CSS3圆角,阴影,透明

CSS实现圆角,阴影,透明的方法很多,传统的方法都比较复杂,用CSS3就方便很多了,虽然现在各浏览器对CSS3的支持还不是很好,但不久的将来CSS3就会普及. 1.圆角 CSS3实现圆角有两种方法. 第一种是背景图像,传统的CSS每个元素只能有一个背景图像,但是CSS3可以允许一个元素有多个背景图像.这样给一个元素添加4个1/4圆的背景图像,分别位于4个角上就可以实现圆角了. Html代码   .box { /* 首先定义要使用的4幅图像为背景图 */ background-image: url

CSS常用的代码段

1.CSS RESET html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, cente