边框阴影与轮廓

本文介绍如何给<div>标签以及图像添加阴影效果,用户还可以给网页中一些元素添加轮廓效果。

box-shadow属性是给对象实现图层阴影效果。

box-shadow: 投影方式  X轴偏移量  Y轴偏移量  阴影模糊半径  阴影拓展半径  阴影颜色;

投影方式  此参数是一个可选值,如果不设值,其默认的投影方式是外阴影;如果取其唯一值"inset",就是将外阴影变成内阴影。

X轴偏移量  指阴影水平偏移量,其值如果为正值,则阴影在对象的右边;反之为负值,阴影在对象的左边。

Y轴偏移量  指阴影垂直偏移量,其值如果为正值,阴影在对象的底部;如果为负值,阴影在对象的顶部。

阴影模糊半径  此参数是可选值,但其值只能是正数。如果其值为0,表示阴影不具有模糊效果,其值越大,阴影的边缘就越模糊。

阴影拓展半径  可选值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小。

阴影颜色  可选值,如果不设定任何颜色时,浏览器会取默认色,但各浏览器默认色不一样,特别是在WebKit内核下的Safari和Chrome浏览器将无色,也就是透明,建议不要省略此参数。

outline属性(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

outline:<color> <style> <width> <offset> inherit

color  指定轮廓边框颜色

style  指定轮廓边框轮廓

width  指定轮廓边框宽度

offset  指定轮廓边框偏移位置的数值

inherit  默认

outline-width属性设置元素整个轮廓的宽度,只有当轮廓样式不是none时,这个宽度才会起作用。如果样式为none,宽度

实际上会重置为0.不允许设置负长度值。

outline-width: thin medium thick <length>

thin 定义细轮廓

medium  默认。定义中等的轮廓。

thick  定义粗的轮廓

<length>  定义轮廓粗细的值

outline-style属性用于设置一个元素的整个轮廓的样式。

outline-style: none dotted dashed solid double groove ridge inset outset

none  默认值。定义无轮廓

dotted  定义一个点状的轮廓

dashed  定义一个虚线轮廓

solid  定义一个实线轮廓

double  定义一个双线轮廓。双线的宽度等同于outline-width的值

groove  定义一个3D凹边轮廓。此效果取决于outline-color的值

ridge  定义一个3D凸槽轮廓。此效果取决于outline-color的值

inset  定义一个3D凹边轮廓。此效果取决于outline-color的值

outset  定义一个3D凸边轮廓。此效果取决于outline-color的值

outline-offset属性可以让轮廓偏离容器边缘,即可以调整外边框与容器边缘的距离

outline-offset:<length> inherit

<length>  定义轮廓距离容器的值

outline-color属性设置一个元素整个轮廓中可见部分的颜色。此时轮廓的样式不能是none,否则轮廓不会出现。

时间: 2024-10-27 13:50:16

边框阴影与轮廓的相关文章

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;/

【边框】-边框阴影-box-shadow

CSS3之box-shadow边框阴影 div{box-shadow: 10px 10px 5px #888888;} 来自为知笔记(Wiz)

CSS3边框阴影

CSS3边框阴影实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3边框阴影</title> <style>  div { width:300px; height:100px; background-color:#ff9900; -moz-box-shadow: 5px 5px 5px #888888; /* 老的 Fi

swift UI专项训练36 ImageVi图片边框阴影

ImageView是我们经常用到的组件,但是我们发现storyboard中图片的属性编辑器中没有对于图片边框的设计.在view中添加一张普通的图片,效果是这样的: 可以看到,白色背景上的深色图片,效果总是有点突兀,我们想要加一个阴影边框来过渡一下图片和背景,打开图片所属的控制器代码,类中所显示的图片名为image,现在来设置它的边框.在viewDidLoad中输入以下代码: image.layer.backgroundColor = UIColor.orangeColor().CGColor i

边框阴影box-shadow

边框的阴影: 参数说明: box-shadow:1px 2px 3px 4px #ccc inset: 1px 从原点开始,沿x轴正方向的长度(倘若为负值,为沿x轴负方向的长度) 2px 从原点开始,沿y轴正方向的长度:(倘若为负值,为沿y轴负方向的长度) 3px 阴影的模糊度,只允许为正值 4px 阴影扩展半径 #ccc 阴影颜色 inset 设置为内阴影(如果不写这个值,默认为外阴影) 说明 1. 对于上边,沿x轴方向的偏移量显然没有意义,设为0px: 2. 沿y轴正方向阴影进入div内部,

CSS入门(css简介与样式汇总、CSS的使用方式、CSS样式表的特征、CSS基础选择器和复杂选择器、边框阴影)

一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 CSS :构建HTML元素的样式 样式汇总: color:red 字体颜色 font-size:字体大小 font-family:字体样式 background-color 背景颜色 width:宽度 height:高度 字体使用实例(样式) font-family:字体的种类 font-size:字

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

CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框 圆角在实际开放过程中,还是蛮常见的.以前基本是通过背景图片做的,有了CSS3后可以使用简单的属性搞定,可以通过border-radius设置元素的圆角半径. 1.圆角边框语法 圆角边框属性 : border-radius 属性值 border-radius: 属性1,属性2,属性3,属性4 # 四个值:第一个值为左上角,第二个值为右上角,第三个值为

边框阴影

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>边框阴影</title> <style> .test { width: 200px; height: 200px; margin: 20px auto; line-height: 200px; text-align: center; backgr

CSS3边框 阴影 box-shadow

box-shadow是向盒子添加阴影.支持添加一个或者多个. box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 参数介绍: box-shadow: h-shadow v-shadow blur spread color inset; h-shadow:水平阴影的偏移值,必需,可以为负值. v-shadow:纵向阴影的偏移值,必需,可以为负值. blur:阴影模糊值,可选,不能为负值. spread:阴影的扩展,可选,可以为负值. c