box-shadow

美妙的 CSS3 动画！一组梦幻般的按钮效果

由 天涯浪子 提交于 2020-03-31 02:53:09
　　今天给大家带来的是五款梦幻般的动画按钮效果。下面是在线演示，把鼠标放在按钮上试试，有惊喜哦！ CSS3 引入了众多供功能强大的新特性，让设计和开发人员能够轻松的创作出各种精美的界面效果。 　　 温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。 源码下载 在线演示 　　这些精美的效果用到了 CSS3 border-radius（圆角）、box-shadow（阴影）、transition（变形）、transform（转换）和 animation（动画）等特性，公共部分的代码 精简以后如下： section > div { display: inline-block; position: relative; width: 200px; height: 200px; margin: 0px auto; /*对于正方形元素border-radius设置为50%刚好变成圆形*/ border-radius: 50%; /*宽度为10px的、不透明度为0.7的黑色边框效果*/ border: 10px solid hsla(0,0%,0%,.7); /*通过边框阴影实现立体按钮效果，inset是内阴影效果*/ box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.7),

IE兼容CSS3圆角border-radius，box-shadow，text-shadow的方法

由 岁酱吖の 提交于 2020-03-30 18:21:16
1.CSS box { -moz-border-radius: 15px; /* Firefox */ -webkit-border-radius: 15px; /* Safari 和 Chrome */ border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ -moz-box-shadow: 10px 10px 20px #000; /* Firefox */ -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */ box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */ behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */ } 2.问题： 一、只能同时4角圆角，不能单独设置； 二、div上可以正常使用，测试text文本框，会出现异常； 三、CSS文件要和页面在同一目录下，否则无效 四、当前元素一定要有定位属性，像是position:relative或是position:absolute属性。 五、z-index值一定要比周围元素的要高，否则……只能说抱歉了~~ 3.支持的样式及状态说明 参见下表： 样式 生效

box-shadow 详解及示例

由 梦想的初衷 提交于 2020-03-26 07:22:45
box-shadow [bɑks] - [ˈʃædoʊ] 英文示意： box：盒，包厢 shadow：阴影，渐变 定义： box-shadow : none | <shadow> [,<shadow>]* <shadow> : inset? && <length>{2,4} && color inset :内阴影，默认为外阴影 <length> --1:阴影的水平偏移量，正值阴影在右侧，负值阴影在左侧， 必填 <length> --2:阴影的垂直偏移量，正值阴影在底部，负值阴影在顶部， 必填 <length> --3:阴影的模糊距离，必须为正值，值越大，阴影边缘越模糊， 非必填 <length> --4:阴影的外延长度值， 非必填 color ：阴影颜色 注： <length>必须为具体的长度单位值，不可使用百分比 可以为一个元素指定多个阴影 阴影的偏移基准值为元素计算宽高，内边距，边框后的值 示例： 1).配合border-radius实现圆形阴影 box-shadow:20px 10px 5px 0px grey; border-radius:50% 2).多重阴影实现多彩边框（ 定义多个阴影时，先定义的阴影在后定义的阴影的上方 ） box-shadow: 10px 0 #77ff8c, -10px 0 #4e71ff, 0 10px #ff62d3, 0 -10px

标准 DOM 盒模型 与 IE 盒模型

由 僤鯓⒐⒋嵵緔 提交于 2020-03-22 10:33:47
包括四个部分：margin>border>padding>content 在标准DOM盒模型中，dom 的 width 和 height 仅作用于content （IE6 及早期版本的IE7 下 width 和 height 包括了 border 和 padding） 因此，一个html元素占据的空间不是width和height，而是这四个部分的加总， 另外，由于margin没有内容无法看到(相邻元素都有margin时，你无法凭肉眼确定 dom 占据范围的边界)，如果你设置了border，那么肉眼所见的 DOM 形状就是border>padding>content三项的加总， 但是，所占据的空间仍是四项的加总。 使用标准盒模型的文档渲染模式有: document.compatMode = "CSS1Compat" 非标准模式(quirke) 下： document.compatMode = "BackCompat" 为了使用 IE 浏览器使用标准模式，可以使用下面的做法： 1、添加文档声明 <!DOCTYPE html> 2、 < meta http-equiv="X-UA-Compatible" content=" IE =edge, chrome=1"> outline 属性：盒模型的outline属性是包围在border外面的边线，设置方法跟border一样

CSS炫酷样式，不断编辑更新...

由 限于喜欢 提交于 2020-03-18 14:05:14
文字阴影 text-shadow:x y blur color text-shadow:水平距离 垂直距离 模糊距离 颜色 盒子阴影 box-shadow：x y blur size color inset/[outset默认外阴影，不能写] box-shadow：水平距离 垂直距离 模糊距离 尺寸 颜色 内/外阴影 first-child【第一个子元素】 li:nth-child(2n+1){color:red} text-indent[首行缩进]最好em为单位 letter-spacing:[字间距] word-spacing[单词间距]针对于英文中文无效 + 对于background，text-shadow;box-shadow等都可以一次设置多个，每个用逗号隔开 float：把他想象成飞机在天上飞，这个会使元素飘起来，因此，如果他下面还有元素没浮动，那个元素就会往上移。 float不会超过父元素的 内边距 【最准确理解就是】：浮动破坏块级元素，使其余的元素【块级】可以顶上来，非块级元素，在他后面【左边或右边】，而块级元素如果在上方没浮动，下方div浮动是不会顶上去的，因为上方块级元素，独占一行 块级元素添加浮动之后，具有行内块特性 ，在不添加width的时候，width会根据，内部元素或文本的宽度为其自身宽度，而不是独占一行 margin-left:-1px /

CSS3_线性渐变（linear-gradient）+ 盒子阴影（box-shadow）

由 六月ゝ 毕业季﹏ 提交于 2020-03-15 16:08:17
-——css3的文章好久没有写过了。今天看到一个比较酷炫的属性——线性渐变（linear-gradient）,决定谈谈这个属性。 linear-gradient ——CSS3 grandient分为线性渐变(linear-gradient)和径向渐变（radial-gradient）。今天主要谈谈线性渐变。(PS:在IE下的实现需要通过IE特有的滤镜来实现。) 线性渐变的语法 先来看看Mozilla、Webkit、Opera下的语法 1 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ); 2 3 -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法 4 5 -o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */ 参数说明： 1， 第一个参数表示线性渐变的方向，top是从上到下，left是从左到右，如果定义了left top，那就是从左上角到右下角。 2， 第二个和第三个参数分别是起点颜色和终点颜色。你可以在它们之前插入更多的参数，表示多种颜色的渐变

-moz-box-shadow

由 混江龙づ霸主 提交于 2020-03-14 07:49:51
css的box-shadow是用来添加边框阴影效果的。 属性值详解： 1、inset 可选值，默认阴影在盒子外 使用inset后，阴影在盒子内，即使指定边框或者透明边框，阴影依然存在。 2、<offset-x> <offset-y> 这是头两个<length> 值，用来设置阴影偏移量。offset-x为设置阴影的水平位移，假如是负值，那么阴影在边框的左侧；offset-y设置阴影的垂直位移，假如是负值，那么阴影位于边框顶部。这个用数学中的数轴来理解应该是可以的，如下图： 我们的水平原点是以边框的左上角为起始点，x为水平位移，Y为垂直位移。 3、<blur-radius> 指定模糊半径，不允许负值，假如设置为0，则阴影不模糊，否则设置越大的值，边框阴影就越模糊。 4、<spread-radius> 指定阴影拓展，假如设置为0，不拓展，正值阴影扩大，负值缩小。 demo： （1）输入框内阴影 .shadow （ -moz-box-shadow: inset 0 0 10px #CCC; -webkit-box-shadow: inset 0 0 10px #CCC; box-shadow: inset 0 0 10px #CCC; ） （2）简单效果 .one （ -moz-box-shadow:5px 5px; -webkit-box-shadow:5px 5px; box

React Native: Apply shadow to outside of View and do not apply to inner views

由 十年热恋 提交于 2020-03-04 18:37:14
问题 This is what my page looks like I am trying to get a shadow only where the red line is I don't want shadow on the inner elements, especially not the text. I also want the shadow to appear below the View. This is how I am styling my View myOuterView: { borderWidth: 1, borderRadius: 2, borderColor: '#ddd', borderBottomWidth: 0, shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.8, shadowRadius: 2, elevation: 1, marginLeft: 5, marginRight: 5, marginTop: 10, }, Answers

博客园css样式代码

由 别说谁变了你拦得住时间么 提交于 2020-02-28 06:21:43
文章有一个好的排版，将能够增加阅读者对其内容的兴趣。本文总结了如何美化博客园中文章的部分显示样式。美化文章标题的显示样式、增添LaTex数学公式的显示、目录索引的显示、添加文章末尾的固定信息。 0 获取权限 首先，在自定一个博客样式之前，我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js权限申请，然后填写申请的理由，耐心等几分钟，再刷新一下，页面就会显示 支持js代码 。 1 美化文章标题 在【博客设置】页面中的【页面定制css代码】框中输入下面的css代码即可完成文章标题的美化的。 #cnblogs_post_body { color: black; font: 0.875em/1.5em "微软雅黑" , "PTSans" , "Arial" ,sans-serif; font-size: 15px; } #cnblogs_post_body h1 { background: #333366; border-radius: 6px 6px 6px 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-family: "微软雅黑" , "宋体" , "黑体"

bootstrap入门-3.响应式原理

由 浪尽此生 提交于 2020-02-19 08:01:46
Bootstrap网格系统（Grid System） 　　响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 1 1 1 1 1 1 1 1 1 1 1 1 4 4 4 4 8 6 6 12 工作原理 　　· 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。 　　· 使用行来创建列的水平组。 　　· 内容应该放置在列内，且唯有列可以是行的直接子元素。 　　· 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。 　　· 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。 　　· 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。 媒体查询 /* 超小设备（手机，小于 768px） */ /* Bootstrap 中默认情况下没有媒体查询 */ /* 小型设备（平板电脑，768px 起） */ @media (min-width: @screen-sm-min) { ... } /* 中型设备（台式电脑，992px 起） */ @media (min-width
订阅 box-shadow