CSS3 内阴影的应用

内阴影应用效果展示：

运用到的具体属性：

box-shadow：0px 1px 0px rgb（255 255 255/10%）,inset 0px 1px 1px rgb（0 0 0/70%）

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

引用菜鸟的图标

布局：

<ul class="ll"> <li><a href="" class="in"></a></li><li><a href="" class="in"></a></li><li><a href="" class="in"></a></li><li><a href="" class="in"></a></li></ul>

样式部分;

<style>*{margin: 0;padding: 0;}a.in{color: brown;font-size: 36px;background: url(./c01.png) no-repeat center;}.ll{margin: 200px auto;width: 450px;height: 200px;background-color: #333;}.ll li a{height: 53px;display: block;overflow: hidden;/* inset 内阴影 */box-shadow: 0px 1px 0px rgb(255 255 255 /10%),inset 0px 1px 1px rgb(0 0 0 /70%);border-radius: 50%;margin: 0 5px;}.ll li{width: 25%;float: left;}a{text-decoration: none;}li{list-style: none;}
</style>

CSS3 内阴影的应用相关推荐

用CSS3实现图像风格
译自:http://webdesignerwall.com/tutorials/css3-image-styles 转载请标明出处:蒋宇捷的博客(http://blog.csdn.net/hfahe) ...
前端工程师应该保存的css3片段
面对每年如此多的新趋势 ,保持行业的领先是个很困难问题. 网站设计者和前端工程师都已经全面的使用 CSS3 properties, 决定这些的是浏览器支持和新的特性. 但是还是有些优秀的CSS2 ...
CSS的50个代码片段
1.css全局 Html代码 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquot ...
每位设计师都应该拥有的50个CSS代码片段
http://www.oschina.net/translate/css-snippets-for-designers?from=20130613 面对每年如此多的新趋势 ,保持行业的领先是个很困难 ...
分享CSS3里box-shadow属性的使用方法，包括内阴影box-shadow：inset
CSS里面的属性很多,有些属性长时间不用,就容易忘,尤其是那种需要设置多个值的属性.比如:box-shadow,每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用,都要查阅 ...
CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）...
CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果,该属性几乎可以让你完成你想要的任何阴影效果.然而 box-shadow 属性语法和取值非常灵活,对于新手有点不容易理解.今天总 ...
CSS3 box-shadow 效果大全（内阴影，外阴影，三边阴影，双边阴影，单边阴影，细线描边…）
CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果,该属性几乎可以让你完成你想要的任何阴影效果.然而 box-shadow 属性语法和取值非常灵活,对于新手有点不容易理解.今天总 ...
CSS3盒子边框阴影，内阴影外阴影
// X:横向阴影(偏移值) // Y:纵向阴影(偏移值) // Z:扩散面积 // #FF00FF:阴影颜色box-shadow: X Y Z #FF00FF; div {box-shadow: 0 ...
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

CSS3 内阴影的应用

CSS3 内阴影的应用相关推荐

最新文章

热门文章