css3阴影 | 易学教程

css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性

阅读更多关于 css3 实现圆角边框的border-radius属性和实现阴影效果的box-shadow属性

　　　　首先我要介绍的是border-radius属性，它的作用是实现圆角边框，其中border-radius：20px;表示，一个’体‘四个角都圆滑20px,其值如果为100px那么圆角度则为最高，如果是正方体则会是一个球，依靠这个属性我们可以不用ps6的情况下，做成一个较为美观的按钮或者控件，它还拥有分别控制4个角的属性border-top-left-radius/border-top-right-radius/border-bottom-left-radius/border-bottom-right-radius，这对我们控制图型有了更准确的把握。　　　　然后要详细介绍的是box-shadow属性，向边框添加阴影，其中它有六个重要的参数。　　　　1.阴影类型：此参数可选，如果不设值，默认的阴影类型是外部阴影，如果取其唯一值“inset”则是内阴影。　　　　2.h-shadow:必有，阴影的水平偏移位置，其值可以是正负值，为正值，其阴影在对象右边，为负值，其阴影在对象左边。　　　　3.v-shadow:必有，阴影的垂直偏移位置，其值也可为正负值，为正值，其阴影在对象的底边，为负值，其阴影在对象的上边。　　　　4.阴影模糊：此参数可选，其值只能为正值，值为0时，表示阴影不具备模糊效果，其值越大则阴影边缘就越模糊。　　　　5.阴影扩展半径：次参数可选，其值可以是正负值

CSS3文本阴影、边框阴影

阅读更多关于 CSS3文本阴影、边框阴影

CSS3添加阴影一、使用text-shadow属性为文本添加阴影二、使用box-shadow属性为边框添加阴影一、为文本添加阴影 text-shadow 使用text-shadow，可以在不使用图像表示文本的情况下，为段落、标题等元素中的文本添加动态的阴影效果。（有继承性）浏览器兼容：IE、Chrome、Firefox、Opera、Safari等所有主流浏览器都支持 text-shadow 属性。 Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。（一）text-shadow用法语法 text-shadow：h-shadow v-shadow blur color；比如 : #b1{text-shadow:5px 5px #aaa;} 表现效果 #b2{text-shadow:-6px -6px #ccc;} 表现效果 #b3{text-shadow:2px 2px 10px #000; } 表现效果 text-shadow的四个值，（前三个值带长度单位，四个值之间不需逗号分隔）： h-shadow 水平阴影的位置，值可以为负数（不可省略） v-shadow 垂直阴影的位置，值可以为负数（不可省略） blur 模糊的距离（可选） color 阴影的颜色（可选） none 默认值（ text-shadow

详解box-shadow

阅读更多关于详解box-shadow

　　今天我们来探究一下“阴影”。　　这个阴影可不是什么心理阴影。我们探究的阴影是图形学中的阴影。同学们可以先想想，在图片中有了阴影，或者使用了阴影之后，为我们的图像提供了哪些特殊的效果？在高中大家在学习美术的时候，那个时候接触素描，去画一个杯子，或者画一个球体，这个时候往往出现，老师画的很逼真，立体感、层次感很强，自己虽说画出来了，在不刻意强调的前提下容易让人们误会（滑稽脸）。　　经过老师的讲解，我们知道想让我们所画的物体，具有立体感，通常有：高光，暗面，灰面，投影（阴影），这几部分组成。说完了图形中的阴影后，来想想如何在我们的页面中绘画出阴影。这就涉及到我们今天要说的内容CSS3中的box-shadow。　　探究box-shadow 　　在先说box-shadow之前，大家先来看看几张图片，具体细致的感受一下box-shadow阴影。　　一张很像纸的纸（废话），有点阴影。　　What?这也是阴影？（不要拿border来骗我好吧。。。）　　这个也用box-shadow画出来的？　　上面的这些图片确实是通过box-shadow画出来的，同学们可能有些小震惊（图一很微妙，图三很炫酷，图二有点开玩笑）。接下来我们来正式探究box-shadow的神奇黑魔法！！！！。　　box-shadow直译被称为“盒子阴影”，直译的结果与同学们的认知是相符的。CSS中存在盒模型

遇到的问题总结

阅读更多关于遇到的问题总结

问题： inline-block使用习惯，给父元素的font-size设为0，不然会有边距怪异模式（英语：quirks mode）是指在计算机领域中，一些网页浏览器为了维持对较旧的网页设计的向后兼容性，而使用的一种技术，有别于严格遵循万维网联盟（W3C）与互联网工程任务组（IETF）标准而设计的“标准模式”。为什么会跨域: 因为浏览器同源策略的限制，不是同源的脚本不能操作其他源下面的对象。 vue axios解决跨域问题: 在 config/index.js 中的的dev 添加以下代码，设置一下proxyTable //加入以下 proxyTable:{ '/api': { target : ' http://api.douban.com ', //设置你调用的接口域名和端口号.别忘了加http changeOrigin : true, //允许跨域 pathRewrite : { '^/api': // '/'这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替。比如我要调用' http://api.douban.com/v2/movie/top250 '，直接写‘/api/v2/movie/top250’即可 } } }, html5十大新特性：（1）语义标签 header 定义了文档的头部区域 footer 定义了文档的尾部区域

前端笔记 day2/5 h5和css3

阅读更多关于前端笔记 day2/5 h5和css3

文章目录复习 h5 h4和h5的区别 css3新增属性文字阴影/盒子阴影边框背景文字溢出隐藏[容错] 透明底图片精灵/雪碧图弹性盒变形过渡动画复习块标签行内标签盒模型 ul和ol的区别去掉列表样式的方法块标签和行内标签的转换 h5 h4和h5的区别 h4 标签小写 h5 – 不区分大小写,但是尽量规范 – 语义化标签  < header > 头部标签 </ header > < nav > 导航标签 </ nav > < section > 正文--大段落 < aside > 侧标栏 </ aside > < article > 小段落标签1 </ article > < article > 小段落标签2 </ article > </ section > < footer > 页脚--个人信息 </ footer >  < input type = " number " >  < input type = " email " >  < input type = " time " >  < input type = " date " >  < input type = " color " >  <

03HTML5学习之视觉元素与图像

阅读更多关于 03HTML5学习之视觉元素与图像

文章目录 1、配置线条与边框水平分隔线元素边框属性与间距属性边框属性边框样式属性内边距属性 2、图像类型图片互换格式（GIF）图片透明度动画压缩优化交错联合照片专家小组（JPEG）图像压缩优化渐进式JPEG 可移植网络图形格式（PNG）图像新型的WebP图像格式 3、图像元素无障碍访问和图像图像超链接 4、HTML5视觉元素 HTML5 Figure元素 HTML5 Figcaption元素 HTML5 Meter元素 HTML5 Progress元素 5、背景图像 background-image属性同时配置背景色和背景图浏览器显示背景图 background-repeat属性 background-position属性 background-attachment属性 6、更多有关图像的知识图像映射映射元素区域元素配置收藏图标 7、图片使用原则图像使用指导原则图片重用权衡图片大小和质量考虑图片的下载时间使用合适的分辨率指定维度注意亮度与对比度 8、CSS3视觉效果 CSS3 background-clip属性 CSS3 background-origin属性 CSS3中对多张背景图像的处理 CSS3圆角效果 CSS3 box-shadow属性 CSS3的opacity属性 1、配置线条与边框

CSS3 利用 text-shadow 实现凹凸文字效果

阅读更多关于 CSS3 利用 text-shadow 实现凹凸文字效果

text-shadow 用于设置文本的阴影 text-shadow: 20px 27px 22px pink; 参数解释：水平位移垂直位移模糊程度阴影颜色。应用场景：实现凹凸文字效果 /* text-shadow 可以设置多个阴影，每个阴影之间使用逗号隔开*/ .tu { text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; } .ao { text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; } 给左上角放白色的阴影，右下角放黑色的阴影，就达到了凹下去的效果。最终效果：全部代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> body { background-color: #666; } div { font-size: 100px; text-align: center

CSS3(1)---圆角边框、边框阴影

阅读更多关于 CSS3(1)---圆角边框、边框阴影

CSS3(1)---圆角边框、边框阴影 CSS3可以简单理解成是CSS的增强版，它的优点在于不仅有利于开发与维护，还能提高网站的性能。一、圆角边框圆角在实际开放过程中，还是蛮常见的。以前基本是通过背景图片做的，有了CSS3后可以使用简单的属性搞定，可以通过border-radius设置元素的圆角半径。 1、圆角边框语法圆角边框属性 : border-radius 属性值 border-radius: 属性1，属性2，属性3，属性4 # 四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角 border-radius: 属性1，属性2，属性3 # 三个值：上->左右->下 border-radius: 属性1，属性2 # 两个值：上下->左右 border-radius: 属性1 # 一个值：四个圆角值相同对于每个边角也可以单独写 border-top-left-radius:10px; // 定义了左上角的弧度半径为10px border-top-right-radius:5px; // 定义了右上角的弧度5px; border-bottom-right-radius:10px; // 定义了右下角的弧度 border-bottom-left-radius:10px; // 定义了左下角的弧度 2、示例 1）画圆弧 <!DOCTYPE html

CSS3:TEXT-SHADOW|BOX-SHADOW（炫彩字体）

阅读更多关于 CSS3:TEXT-SHADOW|BOX-SHADOW（炫彩字体）

2016年2月26日个人博客文章--迁移到segmentfault （1）text-shadow(文本阴影) 在介绍css3:text-shadow文本阴影之前，我们先来看看用它都能实现什么效果：没错文本的阴影的效果很强大，接下来我们就一起开始学习吧. 语法：text-shadow：none | length{2,3} color 默认值：none 取值： none:无阴影第1个长度值：阴影水平偏移值。可为负值第2个长度值：阴影垂直偏移值。可为负值第3个长度值：可选，阴影模糊值。不允许负值 color：设置阴影的颜色说明: 可以设定多组效果，每组参数值以逗号分隔 text-shadow:水平偏移量垂直偏移量阴影模糊值颜色（rgba）, 水平偏移量垂直偏移量阴影模糊值颜色（rgba）, 水平偏移量垂直偏移量阴影模糊值颜色（rgba）注意：(1)使用空格分开不同属性值 (2)使用逗号分开不同阴影属性 <html> <head> <meta charset="utf-8"> <title>字体</title> <meta name="keywords" content=""> <meta name="description" content="">

IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性1

阅读更多关于 IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性1

通过CSS选择器找到元素，就要使用CSS属性给找到的元素设置样式。尽管现在的浏览器已经支持了众多的CSS3属性，但作为初学者，最应该关注的就是一些“主流”的属性，如border-radius、box-shadow、transform等。它们有良好的文档、极佳的测试效果并且经常用到，将成为你设计网站的得力助手。学习CSS3的属性就要先从主流的属性开始，其他属性则可通过CSS3手册获得帮助。具体实例展示，读者可以在下一章大量学习。本节主要学习CSS3属性的用法及兼容性。 1 使用CSS3属性前的准备虽然目前主流的浏览器大多不支持CSS3的大多数属性，但还是鼓励读者在前端开发中要学会并且运用这些CSS3属性，因为这是未来的发展趋势。关键是首先要确定你是否对各个浏览器之间的细微差别有所了解，你能肯定地说IE显示的90°角就不圆滑吗？这取决于你的决定。但是要永远记住，网站设计不必看到所有浏览器的不同。在使用CSS3的一些高级特性时，需指定所有浏览器的前缀。CSS3的前缀是一家浏览器生产商经常使用的一种方式，它暗示该CSS属性或规则尚未成为W3C标准的一部分。CSS3前缀的浏览器属性规则如表1所示。表1 CSS3前缀的浏览器属性规则既然CSS3代码中（暂时）需要写上这么多前缀，就需要注意顺序问题，要先写私有的CSS3属性，再写标准的CSS3属性。如果以后当一个属性成为标准

订阅 css3阴影