CSS边框阴影效果

ul { margin:5px 0 0 0; padding:0; list-style:none; width:300px; background:#f1f1f1; }
li { border-left:1px solid #fff; border-bottom:1px solid #999; border-top:1px solid #fff; border-right:1px solid #ccc; line-height:28px; text-indent:20px; font-family:arial; cursor:pointer; border-radius:4px; margin-bottom:3px; color:#6f6f7a; transition:0.3s; }
li:hover { border-right:1px solid #fff; border-top:1px solid #999; border-bottom:1px solid #fff; border-left:1px solid #999; background:#6e697a; color:#fff; }

时间： 2024-11-19 00:20:02

CSS边框阴影效果的相关文章

兼容低版本IE浏览器的边框阴影效果

兼容低版本IE浏览器的边框阴影效果:使用box-show属性可以实现边框阴影效果,但是IE8和IE8以下浏览器不支持此属性,不过可以通过以下方式实现,当然实现全兼容的方式有多种,下面是一种比较简陋的方式,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www

CSS边框与边界

CSS边框与边界 1.CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 1.1.边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来定义边框的样式 1.2.边框宽度 您可以通过 border-width 属性为边框指定宽度. 为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em:或者使用 3 个关键字之一,它们分别是 thin .medium(默认值) 和 thick. 注意:CSS 没有定义 3 个关键字的具体宽度,所以一个用户

第17章 CSS边框与背景（上）

第 17章 CSS边框和背景[上]学习要点:1.声明边框2.边框样式3.圆角边框 本章主要探讨 HTML5中 CSS边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观.一．声明边框边框的声明有三个属性设置,样式表如下:属性 值 说明 CSS版本border-width 长度值 设置边框的宽度,可选 1border-style 样式名称 设置边框的样式,必选 1border-color 颜色值 设置边框的颜色,可选 1 这三个属性值,只有 border-style是必须声明,才可以出现边

CSS 边框 阴影 效果

下面将css实现阴影效果,以便需要朋友们,直接上代码 #shadow1{width: 200px;height: 100px;color: white; box-shadow: 5px -5px 1px 1px #000;-webkit-box-shadow:5px -5px 1px 1px #000;-moz-box-shadow:5px 5px 1px 1px #000;    /* For IE 8 */    -ms-filter: progid:DXImageTransform.Mic

css边框阴影

<style type="text/css">.mydiv{width:250px;height:auto;border:#909090 1px solid;background:#fff;color:#333;filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/*ie*/-moz-box-shadow: 2px 2px 10px #909090;/

理解CSS边框border

前面的话 ??边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式 ??边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度).边框颜色和边框样式,且先后顺序无关 border: border-width border-color border-style border: 1px solid red; [边框样式] ??如果一个边框没有样式,边框将根本不会存在 ??关于虚线dashed,在chrome/firefox下,

第七十四节，css边框与背景

css边框与背景 学习要点: 1.声明边框 2.边框样式 3.圆角边框  本章主要探讨HTML5中CSS边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 声明边框 边框的声明有三个属性设置,样式表如下            属性                       值                           说明                                            CSS版本       border-width        

第 17 章 CSS 边框与背景[下]

学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一．设置背景 盒模型的尺寸可以通过两种方式实现可见性,一种就是之前的边框,还有一种就是背景. CSS 背景设置的样式表如下: 属性 说明 CSS 版本 background-color 背景的颜色 1 background-image 背景的图片 1/3 background-repeat 背景图片的样式 1/3 background-size 背景图

CSS边框问题及妙用

CSS边框并非矩形重叠拼接,而是以梯形无缝拼接. 如下图: 实现代码: .test1{ width: 20px; height: 20px; border-color: red green blue yellow; border-style: solid; border-width: 60px 60px 60px 60px;} 如果只给其中两条边设置宽度,则未设置的边依然呈现矩形: 实现代码: .test1{ width: 10px; height: 20px; border-color: re