1. 首页
  2. IT资讯

前端开发教程之CSS(三)

“u003Cdivu003Eu003Cpu003E经过昨天分享的一些选择器和几个简单的属性;接下来小编将分享一些工作中常常用到的属性:u003Cu002Fpu003Eu003Cpu003E1、边框阴影属性:box-shadow :u003Cu002Fpu003Eu003Cpu003Eh-shadow : 水平阴影距离u003Cu002Fpu003Eu003Cpu003Ev-shadow : 垂直阴影距离u003Cu002Fpu003Eu003Cpu003Eblur : 可选,模糊距离u003Cu002Fpu003Eu003Cpu003Espread : 可选, 阴影的尺寸u003Cu002Fpu003Eu003Cpu003Ecolor : 可选,颜色u003Cu002Fpu003Eu003Cpu003Einset : 可选值,将当前阴影修改为内阴影u003Cu002Fpu003Eu003Cpu003E语法规范:box-shadow:h-shadow v-shadow blur spread color inset;u003Cu002Fpu003Eu003Cpu003E也可简写为:box-shadow:h-shadow v-shadow blur color;u003Cu002Fpu003Eu003Cpu003E举个栗子: box-shadow:1px 1px 1px 1px red;u003Cu002Fpu003Eu003Cpu003E2、图片边框属性: border-image:u003Cu002Fpu003Eu003Cpu003Eborder-image-source : 图片路径u003Cu002Fpu003Eu003Cpu003Eborder-image-width:图片边框的宽度u003Cu002Fpu003Eu003Cpu003Eborder-image-repeat : 边框的平铺方式u003Cu002Fpu003Eu003Cpu003E取值 :repeat : 平铺 round : 铺满 stretch : 拉伸 语法规范:border-image:source width repeat;u003Cu002Fpu003Eu003Cpu003E3、轮廓,即绘制于元素周围的一条线,位于边框的外围u003Cu002Fpu003Eu003Cpu003E语法规范: outline : width style color;u003Cu002Fpu003Eu003Cpu003Eoutline-width : 轮廓宽度u003Cu002Fpu003Eu003Cpu003Eoutline-style : 轮廓的样式u003Cu002Fpu003Eu003Cpu003Eoutline-color : 轮廓的颜色u003Cu002Fpu003Eu003Cpu003E*******************************************************u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F31eb0004e47c09df0b13″ img_width=”643″ img_height=”404″ alt=”前端开发教程之CSS(三)” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E1、框模型别名:方框属性、盒子属性、盒子模型u003Cu002Fpu003Eu003Cpu003E框模型主要设置了元素的 外边距、内边距、边框、宽度、高度u003Cu002Fpu003Eu003Cpu003E元素实际宽度 = 左外边距 + 左边框 + 左内边距 + 宽度 + 右内边距 + 右边框+ 右外边距;u003Cu002Fpu003Eu003Cpu003E2、外边距u003Cu002Fpu003Eu003Cpu003E1、什么是外边距?即围绕在元素边框周围的空白区域,页面会为元素增加额外的空白距离,外边距是透明的,位置在边框外u003Cu002Fpu003Eu003Cpu003E2、属性:marginu003Cu002Fpu003Eu003Cpu003E2.1、统一设置四个方向的外边距u003Cu002Fpu003Eu003Cpu003Emargin : value,如 margin:10px;u003Cu002Fpu003Eu003Cpu003E22.、单方向设置u003Cu002Fpu003Eu003Cpu003Emargin-leftu002Frightu002Ftopu002Fbottom : value;u003Cu002Fpu003Eu003Cpu003E2.3、margin 简写u003Cu002Fpu003Eu003Cpu003Emargin:value ; (四个方向)u003Cu002Fpu003Eu003Cpu003Emargin:value(上下) value(左右);u003Cu002Fpu003Eu003Cpu003Emargin:value(上) value(左右) value(下);u003Cu002Fpu003Eu003Cpu003Emargin:value(上) value(右) value(下) value(左);u003Cu002Fpu003Eu003Cpu003E3、margin取值(单位) px,%;u003Cu002Fpu003Eu003Cpu003Eauto : 如果左右外边距设置为 auto的话,那么当前元素在它外层容器中就会水平居中显示,多数使用在块级元素在其外层容器内的水平居中u003Cu002Fpu003Eu003Cpu003E取值为负:u003Cu002Fpu003Eu003Cpu003E4、外边距合并u003Cu002Fpu003Eu003Cpu003E当两个垂直外边距相遇时,他们将形成1个外边距。称为外边距合并。外边距的值,以大值为主。u003Cu002Fpu003Eu003Cpu003E5、问题u003Cu002Fpu003Eu003Cpu003E内外嵌套的div元素,如果设置内层div的margin-top,默认会作用于外层div的margin-top上,而内层没有任何效果。u003Cu002Fpu003Eu003Cpu003E解决方案:u003Cu002Fpu003Eu003Cpu003E1、外层元素添加边框u003Cu002Fpu003Eu003Cpu003E2、通过外层元素的上内边距来实现u003Cu002Fpu003Eu003Cpu003E3、内边距u003Cu002Fpu003Eu003Cpu003E3.1、什么是内边距,即内容区域与边框之间的控件u003Cu002Fpu003Eu003Cpu003E3.2、特点:元素一单设置了内边距后,会扩大整个元素区域u003Cu002Fpu003Eu003Cpu003E3.3、属性u003Cu002Fpu003Eu003Cpu003Epadding : value; 上下左右u003Cu002Fpu003Eu003Cpu003Epadding : value(上下) value(左右);u003Cu002Fpu003Eu003Cpu003Epadding : value value value;u003Cu002Fpu003Eu003Cpu003Epadding : value value value value;u003Cu002Fpu003Eu003Cpu003Epadding-top:u003Cu002Fpu003Eu003Cpu003Epadding-bottom:u003Cu002Fpu003Eu003Cpu003Epadding-left:u003Cu002Fpu003Eu003Cpu003Epadding-right:u003Cu002Fpu003Eu003Cpu003E3.4、css重写 u002F 重置u003Cu002Fpu003Eu003Cpu003E取消了一些元素(ul,p,h1 ….)自带的样式u003Cu002Fpu003Eu003Cpu003E*{u003Cu002Fpu003Eu003Cpu003Emargin:0px;u003Cu002Fpu003Eu003Cpu003Epadding:0px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Eul{u003Cu002Fpu003Eu003Cpu003Epadding:20px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E*******************************************************u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F31f000029931c71f0b67″ img_width=”640″ img_height=”380″ alt=”前端开发教程之CSS(三)” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E1、背景u003Cu002Fpu003Eu003Cpu003E背景颜色、背景图像u003Cu002Fpu003Eu003Cpu003E背景颜色:使用单一色作为背景u003Cu002Fpu003Eu003Cpu003E背景图像:以图片做背景、以渐变色做背景u003Cu002Fpu003Eu003Cpu003E1、背景颜色u003Cu002Fpu003Eu003Cpu003E属性:background-color:颜色值;u003Cu002Fpu003Eu003Cpu003E2、背景图片u003Cu002Fpu003Eu003Cpu003E属性:background-imageu003Cu002Fpu003Eu003Cpu003E取值:url(图像路径);u003Cu002Fpu003Eu003Cpu003Ebackground-image:url(“imagesu002Flogo.png”);u003Cu002Fpu003Eu003Cpu003Ebackground-image:url(‘imagesu002Flogo.png’);u003Cu002Fpu003Eu003Cpu003Ebackground-image:url(imagesu002Flogo.png);u003Cu002Fpu003Eu003Cpu003E3、背景重复u003Cu002Fpu003Eu003Cpu003E属性:background-repeat:u003Cu002Fpu003Eu003Cpu003E取值:u003Cu002Fpu003Eu003Cpu003Erepeat : 默认值,垂直和水平都平铺u003Cu002Fpu003Eu003Cpu003Erepeat-x : 仅在水平方向平铺u003Cu002Fpu003Eu003Cpu003Erepeat-y : 仅在垂直方向平铺u003Cu002Fpu003Eu003Cpu003Eno-repeat : 不平铺,仅显示一次u003Cu002Fpu003Eu003Cpu003E4、背景图片尺寸u003Cu002Fpu003Eu003Cpu003E属性:background-sizeu003Cu002Fpu003Eu003Cpu003E取值:value1 value2 : 宽度 高度 或者 value% value2% : 百分比u003Cu002Fpu003Eu003Cpu003Ecover:扩大背景图像,使背景图完全覆盖背景区域,直到碰到最后一个边缘才停止u003Cu002Fpu003Eu003Cpu003Econtain:扩大背景图像,碰到第一个边缘就停止u003Cu002Fpu003Eu003Cpu003E5、背景图像固定u003Cu002Fpu003Eu003Cpu003E属性:background-attachmentu003Cu002Fpu003Eu003Cpu003E取值:scroll即默认,滚动定位 fixed即固定定位u003Cu002Fpu003Eu003Cpu003E6、背景定位u003Cu002Fpu003Eu003Cpu003E背景图像在区域中的哪个位置进行显示u003Cu002Fpu003Eu003Cpu003E属性:background-positionu003Cu002Fpu003Eu003Cpu003E取值: x% y%: 水平位置 垂直位置 或者 x y :水平位置 垂直位置u003Cu002Fpu003Eu003Cpu003Ex 为正 , 向右移动u003Cu002Fpu003Eu003Cpu003Ex 为负 , 向左移动u003Cu002Fpu003Eu003Cpu003Ey 为正 , 向下移动u003Cu002Fpu003Eu003Cpu003Ey 为负 , 向上移动u003Cu002Fpu003Eu003Cpu003Eleft right top bottomu003Cu002Fpu003Eu003Cpu003Ecenter : 居中(x,y)u003Cu002Fpu003Eu003Cpu003Ex:可取值为 left , right , centeru003Cu002Fpu003Eu003Cpu003Ey :可取值为 top , bottom, centeru003Cu002Fpu003Eu003Cpu003Ebackground-position:left top;u003Cu002Fpu003Eu003Cpu003Ebackground-position:center;u003Cu002Fpu003Eu003Cpu003E常用方式:u003Cu002Fpu003Eu003Cpu003E1、创建一个与要显示图标大小一样的元素u003Cu002Fpu003Eu003Cpu003E2、为创建好的元素设置背景图像(大背景图)u003Cu002Fpu003Eu003Cpu003E3、通过background-position,将图片移动到指定的位置处u003Cu002Fpu003Eu003Cpu003E7、背景绘制区域u003Cu002Fpu003Eu003Cpu003E背景从哪开始裁减u003Cu002Fpu003Eu003Cpu003Ebackground-clipu003Cu002Fpu003Eu003Cpu003E设置背景显示区域u003Cu002Fpu003Eu003Cpu003E属性:background-clipu003Cu002Fpu003Eu003Cpu003E值:u003Cu002Fpu003Eu003Cpu003Eborder-box:背景被裁剪到边框,默认值u003Cu002Fpu003Eu003Cpu003Epadding-box:背景被裁减到内边距框(忽略内边距)u003Cu002Fpu003Eu003Cpu003Econtent-box:背景被裁减到内容框上(只显示内容区域)u003Cu002Fpu003Eu003Cpu003E8、背景的定位区域u003Cu002Fpu003Eu003Cpu003E背景从哪开始画u003Cu002Fpu003Eu003Cpu003E属性:background-originu003Cu002Fpu003Eu003Cpu003E取值:u003Cu002Fpu003Eu003Cpu003Eborder-box:从边框开始画u003Cu002Fpu003Eu003Cpu003Epadding-box:从内边距处开始画u003Cu002Fpu003Eu003Cpu003Econtent-box:从内容区域上开始画u003Cu002Fpu003Eu003Cpu003E9、背景合并u003Cu002Fpu003Eu003Cpu003E属性:background:u003Cu002Fpu003Eu003Cpu003Ebackground:color url() repeat attachment position;u003Cu002Fpu003Eu003Cpu003E常用方式:u003Cu002Fpu003Eu003Cpu003Ebackground:url repeat position;u003Cu002Fpu003Eu003Cpu003Ebackground:url(imagesu002F1.jpg) no-repeat -15px 20px;u003Cu002Fpu003Eu003Cpu003Ebackground-image:url();u003Cu002Fpu003Eu003Cpu003Ebackground-repeat:no-repeat;u003Cu002Fpu003Eu003Cpu003Ebackground-position:-15px 20px;u003Cu002Fpu003Eu003Cpu003Ebackground:red;u003Cu002Fpu003Eu003Cpu003Ebackground:url(1.jpg);u003Cu002Fpu003Eu003Cpu003E2、渐变u003Cu002Fpu003Eu003Cpu003E多个颜色值之间平缓过度u003Cu002Fpu003Eu003Cpu003E渐变分类:u003Cu002Fpu003Eu003Cpu003E1、线性渐变u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F31f400042d57edaeb4b7″ img_width=”600″ img_height=”208″ alt=”前端开发教程之CSS(三)” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E2、径向渐变u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F31f400042d8ee30180b0″ img_width=”1440″ img_height=”900″ alt=”前端开发教程之CSS(三)” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E3、重复渐变u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F31eb0004eb6cbcb0caf0″ img_width=”408″ img_height=”310″ alt=”前端开发教程之CSS(三)” inline=”0″u003Eu003Cu002Fpu003Eu003Cpu003E注意:u003Cu002Fpu003Eu003Cpu003E所有的渐变,都是通过 background-image 进行设置u003Cu002Fpu003Eu003Cpu003E线性渐变:linear-gradientu003Cu002Fpu003Eu003Cpu003E径向渐变:radial-gradientu003Cu002Fpu003Eu003Cpu003E重复线性:repeating-linear-gradientu003Cu002Fpu003Eu003Cpu003E重复径向:repeating-radial-gradientu003Cu002Fpu003Eu003Cpu003Ebackground-image:linear-gradient();u003Cu002Fpu003Eu003Cpu003E1、线性渐变u003Cu002Fpu003Eu003Cpu003Elinear-gradient(angle,color-point1,color-point2,…)u003Cu002Fpu003Eu003Cpu003Eangleu003Cstrongu003E:u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cpu003E取值范围有:关键词:to top ,to bottom ,to right ,u003Cu002Fpu003Eu003Cpu003E角度: 0deg –> to topu003Cu002Fpu003Eu003Cpu003E90deg –>to rightu003Cu002Fpu003Eu003Cpu003E180deg –> to bottomu003Cu002Fpu003Eu003Cpu003Ecolor-point:渐变颜色的开始点、中间过渡点、结束点u003Cu002Fpu003Eu003Cpu003E取值范围有:u003Cu002Fpu003Eu003Cpu003Ered 0%:从开始处显示红色u003Cu002Fpu003Eu003Cpu003Egreen 50%: 到 50% 位置处 ,变成绿色u003Cu002Fpu003Eu003Cpu003Eblue 100% : 到结尾处,变为蓝色u003Cu002Fpu003Eu003Cpu003E2、径向渐变u003Cu002Fpu003Eu003Cpu003Eradial-gradient([size at position,]color-point1,color-point2, ….)u003Cu002Fpu003Eu003Cpu003Esize at position:size即放射的圆形的半径 position即原点所在坐标u003Cu002Fpu003Eu003Cpu003Eleft top bottom right centeru003Cu002Fpu003Eu003Cpu003E3、重复渐变u003Cu002Fpu003Eu003Cpu003Ebackground-image:repeating-linear-gradient(to bottom,red 0,green 10px);u003Cu002Fpu003Eu003Cpu003E4、浏览器兼容性u003Cu002Fpu003Eu003Cpu003E对不支持的版本,通过前缀u003Cu002Fpu003Eu003Cpu003EFirefox: -moz-u003Cu002Fpu003Eu003Cpu003EChrome,Safar: -webkit-u003Cu002Fpu003Eu003Cpu003EOpera :-o-u003Cu002Fpu003Eu003Cpu003Ebackground-image:-webkit-linear-gradient(to bottom,red,green); Chrome Safariu003Cu002Fpu003Eu003Cpu003Ebackground-image:-o-linear-gradient(to bottom,red,green); Operau003Cu002Fpu003Eu003Cpu003Ebackground-image:-moz-linear-gradient(to bottom,red,green); Firefoxu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:前端开发教程之CSS(三)

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11286.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code