css3选择器-边框-阴影效果

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>盒阴影</title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel="stylesheet" href="reset.css">
<style type="text/css">
p{color:#666;
　　margin:20px auto;
　　padding:40px 0;
　　text-align:center;
　　height:50px;
　　width:380px;
　　font-size:26px;
　　font-weight:bold;
　　background:#ccccff;
/*font-family:Britannic Bold;*/
}
.p1{
　　border-radius:230px/50px;
　　box-shadow:1px -1px 0px 0px rgba(153,153,238,0.1),2px -2px 0px 0px rgba(153,153,238,0.1),3px -3px 0px 　　0px rgba(153,153,238,0.1),4px -4px 0px 0px rgba(153,153,238,0.1),5px -5px 0px 0px 　　rgba(153,153,238,0.1),6px -6px 0px 0px rgba(153,153,238,0.1),7px -7px 0px 0px 　　rgba(153,153,238,0.1),8px -8px 0px 0px rgba(153,153,238,0.1),9px -9px 0px 0px 　　rgba(153,153,238,0.1),10px -10px 0px 0px rgba(153,153,238,0.1),11px -11px 0px 0px 　　rgba(153,153,238,0.1),12px -12px 0px 0px rgba(153,153,238,0.1),13px -13px 0px 0px 　　rgba(153,153,238,0.1),14px -14px 0px 0px rgba(153,153,238,0.1),15px -15px 0px 0px 　　rgba(153,153,238,0.1);
}
.p2{
　　border-radius:230px/50px;
　　box-shadow:0px 0px 2px 3px rgba(153,153,238,1),0px 0px 5px 7px rgba(153,153,238,0.4);
}
.p3{
　　box-shadow:5px 0px 0px 5px rgba(153,153,238,1);
}
.p4{
box-shadow:
　　0px 0px 0px 2px rgba(255,0,0,1),
　　0px 0px 0px 4px rgba(255,127,0,1),
　　0px 0px 0px 6px rgba(255,255,0,1),
　　0px 0px 0px 8px rgba(0,255,0,1),
　　0px 0px 0px 10px rgba(0,255,255,1),
　　0px 0px 0px 12px rgba(0,0,255,1),
　　0px 0px 0px 14px rgba(255,0,255,1);
}
</style>
</head>
<body>
<p class=‘p1‘>Box Shadow</p>
<p class=‘p2‘>Box Shadow</p>
<p class=‘p3‘>Box Shadow</p>
<p class=‘p4‘>Border Colors?/Box Shadow?</p>
</body>
</html>

时间： 2024-07-29 01:12:17

css3选择器-边框-阴影效果的相关文章

css3基础-选择器+边框与圆角+背景与渐变

Css3选择器相关: section > div直接子元素选择器 div + article相邻兄弟选择器(在元素之后出现) div ~ article通用兄弟选择器(在元素之后出现) 属性选择器: a[href] { text-decoration: none; } a[href="#"] { color: #f00; } /*包含two且属性值用空格分隔:*/ a[class~="two"] { color: #ff0; } /*属性的第一个值以#开头:*

CSS3知识点整理（二）----CSS3选择器

总结各种CSS3选择器的介绍及具体语法 (一)属性选择器 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新增了3个属性选择器,使得属性选择器有了通配符的概念,这三个属性选择器与CSS2的属性选择器共同构成了CSS功能强大的属性选择器.如下表所示: html代码: <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon"&

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器--基本选择器>和<CSS3选择器--属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分--伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择

CSS3 border-radius边框圆角

CSS3 border-radius边框圆角http://www.cnblogs.com/polk6/p/6050818.html 在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 1. 介绍 1.1 圆角属性 CSS3提供了5种圆角属性: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :

CSS3选择器（基础选择器、属性选择器、伪类选择器、选择器策略）

<CSS3基本选择器> 一.通配符选择器(*) *{ marigin: 0; padding: 0; } 二.元素选择器(E) li {background-color: grey;color: orange;} 三.类选择器(.className) 四.id选择器(#ID) #first {background: lime;color: #000;} #last {background: #000;color: lime;} 五.后代选择器(E F) .demo li {color: blu

CSS3 选择器 基本选择器介绍

CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选择器主要是用来确定html的树形结构中的DOM元素节点.我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器:第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器,这一部分也是最难理解和掌握的部分,今天我们先来看第一部分——基本选择器.我们先来看一个常用的选择器列表图

30个CSS3选择器的应用

或许大家平时总是在用的选择器都是: id class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选 或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,爱创课堂为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 更多精彩关注:http://www.icketang.com/ 1 *:通用选择器 * { margin:0; padding:0; } *选择器是选择页面上的全部元素,上

CSS 基础-选择器-边框和背景-文本样式

CSS3 选择器 本文内容部分来自于https://developer.mozilla.org/zh-CN/docs/Learn/CSS 选择器可以被分为以下类别: 简单选择器(Simple selectors):通过元素类型.class 或 id 匹配一个或多个元素. 属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素. 伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,

css3 选择器（二）

接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n"是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1,-n+5)和关键字(odd[奇数].even[偶数]),但是参数n的值起始值始终是1,而不是0.也就是说,参数n的值为0时,选择器将选择不到任何匹配的元素. Note:当“:nth-child(n)”选择器中的n为一个表达式时,其中