CSS3:元素的边框、背景和大小】的更多相关文章

边框 盒子圆角 border-radius:5px / 20%: border-radius:5px 4px 3px 2px; 左上,右上,右下,左下 盒子阴影 box-shadow:box-shadow:x轴偏移量 y轴偏移量 阴影模糊半径(阴影颜色的模糊程度) 阴影扩展半径 阴影颜色 投影方式 注意:inset 是指阴影在盒子内部,默认在外部,inset写到第一个或者最后一个参数位置,其他位置是无效的 值有3个时,表示距离左侧.距离上侧.影子颜色     值有4个时,表示距离左侧.距离上侧.…
CSS3边框: 1.CSS3圆角:border-radius  属性--创建边框线的圆角 <body style="font-size:24px; color:#60F;"> 20px圆角 <div style="width:200px; height:100px; border:1px solid red; border-radius:20px;"></div> 20%圆角 取宽的20%和高的20% <div style=…
CSS3入门之边框与背景 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { margin: 15px…
background-size需要两个值,它的类型可以是像素(px).百分比(%)或是auto,还可以是cover和contain.第一个值为背景图的width,另外一个值用于指定背景图上的height,如果只设定1个值,则第2个默认为auto,但当值为cover和contain时除外. cover:保持图像的宽高比例,将图片缩放到正好完全覆盖定义的背景区域,其中有一边和背景相同. html: <div class="div" ><h1>雨打浮萍</h1&…
废话当然不说了. 直接上代码 <style> #mycon { background:url('Tpl/1.jpg'); background-size:400px 400px; background-repeat:no-repeat; border-radius: 4px; border: 1px solid #ccc; width: 400px; height: 400px; } </style> <div id="mycon"> 原来背景图大小…
css3新增属性 边框属性 背景属性 文字属性 颜色属性 背景属性 属性 说明 background-image 添加背景图片 background-size 指定背景图像的大小 background-origin 指定背景图像的位置区域 background-clip 指定位置开始裁剪背景图 1. background-image(背景图片) CSS3中可以通过background-image属性添加背景图片 语法:background-image:url('图片地址') 注意:不同的背景图像…
一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像定义样式或图像来源路径 border-image-slice CSS3 设置或检索对象的边框背景图的分割方式 border-image-width CSS3 设置或检索对象的边框厚度 border-image-outset CSS3 设置或检索对象的边框背景图的扩展 border-image-rep…
[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选择器的类型把选择器分为:基础选择器 和 复合选择器,复合选择器是建立在基础选择器之上,对基础选择器进行组合形成的. 复合选择器可以更准确.更高效的选择目标元素(标签) 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的 常用的复合选择器包括:后代选择器.子选择器.并集选择器.伪类选择器等…
方法一: 文档地址:http://www.w3school.com.cn/cssref/pr_box-sizing.asp CSS3 box-sizing属性:    box-sizing: border-box; 抱歉,由于我的粗心,导致之前标题中的错误.目前已经改回来了. 再次强调一下,该属性包含元素的边框和内边距,不包含外边距!…
经常看到别人的网站有个边框来修饰文字区域,类似圆角矩形把文字环绕起来,特别有感觉,于是就试着用图片边框来修饰,但是用图片过多会拉慢网页的加载速度,能不能使用css3来实现边框圆角效果呢?当然border-radius要在firefox或Safari 和 Chrome才能实现 W3C 很早就制订了实现了 CSS 圆角的 CSS3 属性:border-radius,Firefox 和 Safari 也通过私有属性实现了该功能: <div style="background-color: #cc…