css中的背景、边框、补丁相关属性

关于背景涉及到背景颜色与背景图片

  背景颜色background-color即可设定;

  背景图片background-image即可设定;

但是背景图片还涉及到其他的一些内容:

  background-attachment:用于设定背景图片是滚动的还是固定的,可以设定为scroll和fixed两种;

  background-position:用于设定背景图片的位置,可以设定为实际值,也可设定为百分比;

  background-repeat用于设定背景图片是否平铺,可以是纵向的也可以是横向的;

css3新增的背景属性:

  background-clip:用于设定背景图片的覆盖范围,可以设定为no-clip,content-box,padding-box,border-box;

  background-origin:用于设定背景图片从哪开始覆盖,可以设定为border,padding,content;

  background-size:用于设定背景图片的大小可以设定为auto,百分比,具体值;

css3新增的多背景图片:

  只需要在背景图片引用时多添加几个背景图片即可,但是在引用时必须的在之间加上逗号隔开,每个图片的属性在使用时也是对  应的隔开即可;

边框相关属性:

  1.可以设定border的粗细,线性,颜色,而且可以单独对每一个边框的粗细,线性,颜色进行设定,但是顺序有要求的,如果是   四个值,分别对应上、右、下、左。如果是俩值,第一个值是上下边框的,第二个值是左右边框,如果是三个值,第一个值是上  边框的,第二个值是左右边框的,第三个是下边框的;  

  2.可以设定边框的线型,可以是none,dotted,dashed,solid;

  3.可以设定边框的风格,可以是double,groove,ridge,inset,outset;

css3提供的渐变边框:

  也就是对宽度足够的边框进行颜色设定,每一个px设定一种颜色,就形成了渐变的效果了,但是苦逼得是目前只有火狐可以用;

css3提供的圆角边框:

  和边框设定一样,一个值就是每一个角都是这种半径,如果是两值,第一个值对应的是左上的和右下的,如果是四个值,分别按  顺时针来对应每一个角;

css3提供的图片边框,没搞懂,再看看吧;

内外补丁的属性设定:

  内补丁就是padding,可以设定上下左右每一个间隔,如果是一个值当然就是对应所有的间隔啦,如果是俩值,第一个是上下间  隔,第二个是左右间隔的,如果是四个值,就按顺时针分别对应啦;

  外补丁就是margin,和padding一样的,不在赘述;  

  

    

css中的背景、边框、补丁相关属性的更多相关文章

  1. css中的字体及文本相关属性

    css中的字体及文本相关属性 1.字体相关属性 字体主要可以设置color.font-family.font-size.font-size-adjust.font-stretch.font-style ...

  2. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  3. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  4. CSS中padding、margin、bordor属性详解

    一.图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以 ...

  5. CSS 关于文本 背景 边框整理

    文本与字体 1)阴影:text-shadow 格式:text-shadow:5px 5px 3px #FFFFFF分别对应 水平方向 垂直方向 模糊程度 颜色值 代码: <!DOCTYPE ht ...

  6. CSS中的背景、雪碧图、超链接的伪类样式

    一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填 ...

  7. CSS中 Padding和Margin两个属性的详细介绍和举例说明

    代码示例: <!doctype html> <html lang="en"> <head> <meta charset="UTF ...

  8. CSS中的背景用法详解

    background 属性是CSS中用于设置元素背景的属性,最简单的background属 性名,是针对背景若干设定的合并简写,最早的CSS只能使用单一背景图片,而在现在却可以设置多个背景图片.而不用 ...

  9. css 中的背景图片小技巧和存在的坑

    body 的背景图设置 第一种 :这种情况下背景图片可以缩放 但是不能完全等比缩放 background: url(imgs/1.jpg)no-repeat; background-position: ...

随机推荐

  1. win7 64位4GB内存下 tomcat7扩大内存

    新部署的scm项目运行第二天报: Could not retrieve transation read-only status server 无法获取事务只读状态服务器 登录界面输入正确账号密码登录后 ...

  2. eclipse 相同变量高亮显示

    windows-> preferences-> java-> Editor-> Mark Occurences

  3. 腾讯云服务器centos 6.5(jdk+tomcat+vsftp)、腾讯mysql数据库 及 tomcat自启动 配置教程

    1.腾讯云数据库配置 1.考虑到安全性问题,,平常不使用root用户登录,新增一个用户名neil,用来管理项目的数据库 a.首先登录root创建db_AA数据库 b.在root用户下,创建neil用户 ...

  4. Java特性-HashMap

    想分享一个对HashMap的理解: 我们首先要知道一个HashMap对象的构成,一般的理解是:一个Map里面放了很多个键值对,合在一起就是一个键值对的数组: 大概这么理解没问题,可是有一点要说明一下, ...

  5. c++中变量声明和变量定义的区别。2016年12月6日

    整个流程: 1.程序告诉cpu,程序将要使用一个变量.(暂时不一定用到,先说一下.) 2.程序告诉CPU,程序现在就要使用一个变量.(现在就用) 3.cpu按照这个变量的类型,把内存划分出几个单位(b ...

  6. 初学者的python学习笔记1

    推荐一段时间闲的蛋疼,总觉得再堕落下去不太好,便捡起了之前一直想学而没有学的python,以此记录一下学习笔记,同时亦是督促和复习. 学习51cto上的<2016最新Python开发基础课程-2 ...

  7. Command Pattern

    当(客户)对象访问(服务)请求服务时,最直接的方法就是方法调用.

  8. javascript曲线图和面积图Line & Area chart控件功能及下载

    Line & Area chart 控件是一款新型的.可用性极强的曲线图和面积图产品.一个您网站的访问者可以放大他感兴趣的一段区域,打开和关闭数值气球,并可显示和隐藏图表.您能创建简单.堆积. ...

  9. 堆糖瀑布流完整解决方案(jQuery)

    2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...

  10. GridView在ScrollView中实现在家更多

    这个本身会有bug  应该在滑动监听中作出判断的 <?xml version="1.0" encoding="utf-8"?><Relativ ...