CSS的边框和背景属性

原创 2015年07月10日 17:45:12

边框:

border——设置所有边的边框(<宽度><样式><颜色>);

border-top、border-bottom、border-left、border-right——设置一条边的边框(<宽度><样式><颜色>);

border-width——设置所有边的边框宽度;

border-style——设置所有边的边框样式;

border-color——设置所有变的边框颜色;

border-top-width、border-top-style、border-top-color——设置某一条边的单一属性;

border-radius——创建圆角边框;

border-top-left-radius、border-top-right-radius、

border-bottom-left-radius、border-bottom-right-radius——设置一个圆角;

border-image——使用图像创建边框;

背景:

background-color——设置元素的背景颜色;

background-position——设置背景图像的位置;

background-size——设置背景图像的尺寸;

background-repeat——设置背景图像的重复样式;

background-origin——设置背景图像绘制的起始位置;

backgroud-clip——设置背景图像裁剪方式;

background-attachment——设置元素中的图像是否固定或随页面一起滚动;

background-image——设置元素的背景图像,如果指定一个以上的图像,则后面的图像绘制在前面的图像下面;

background——设置背景的简写形式(按以上属性顺序,可省略其中一个或多个);

box-shadow——为元素指定阴影;

outline-color——设置外围轮廓的颜色;

outline-offset——设置轮廓距离元素边框边缘的偏移量;

outline-style——设置轮廓样式;

outline-width——设置轮廓的宽度;

outline——在一条声明中设置轮廓的简写属性(<宽度><样式><颜色>)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>上海远地资产管理有限公司</title>
    <meta name="author" content="jason"/>
    <meta name="description" content="上海远地资产管理有限公司(简称:远地资产),是一家专业的互联网金融服务平台."/>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
</head>
<style type="text/css">
    p{
        border: medium solid black;
        width:30%;
        margin: 1px;
        float: left;
    }
    #first{
        border-radius: 20px / 5px;
    }
    #second{
        border-radius: 50% 20px 25% 5em /25% 15px 40px 55%;
    }
    #third{
        border-image:url(images/xw_sohu.png) 2 / 5px;
        -webkit-border-image:url(images/xw_sohu.png) 2 / 5px;
        -moz-border-image:url(images/xw_sohu.png) 2 / 5px;
        -o-border-image: url(images/xw_sohu.png) 2 / 5px;
    }
    #fourth{
        background-color: lightgray;
        background-image: url(images/xw_cenn.png);
        background-size:145px 30px;
        background-repeat: repeat-x;
    }
    textarea{
        background-color: lightgray;
        background-image: url(images/xw_cenn.png);
        background-size:145px 30px;
        background-repeat: repeat;
        background-attachment: scroll;
    }
    #fifth{
        box-shadow: 5px 4px 10px 2px gray,4px 4px 6px gray inset;
    }
</style>
<body>
    <p id="first">
        远地本着“构筑诚信,永续发展”的理念为客户提供专业的理财服务、财富管理以及产品方案推荐。
        远地将通过自身的专业优势和有效的信息交流平台,为资金富裕方和资金需求方打造一个专业,诚信,共赢,睿智的服务平台,
        帮助客户实现稳定、安全的财富增值,帮助更多优秀的中小型企业融资成功。
    </p>
    <p id="second">
        远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神,已为200多家企业包括国企、民企和院所提供了企业转型升级、
        战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
        并与100多家企业建立长期战略伙伴的合作关系。
    </p>
    <p id="third">我喜欢新浪</p>
    <p id="fourth">
        远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神,已为200多家企业包括国企、民企和院所提供了企业转型升级、
        战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
        并与100多家企业建立长期战略伙伴的合作关系。
    </p>
    <p id="fifth">
        远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神,已为200多家企业包括国企、民企和院所提供了企业转型升级、
        战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
        并与100多家企业建立长期战略伙伴的合作关系。
    </p>
    <a href="http://www.sina.com" id="sina">访问新浪</a>

    <textarea>
        远地秉承“奉献、拼搏、勤奋、团结奉献”的职业精神,已为200多家企业包括国企、民企和院所提供了企业转型升级、
        战略规划设计、集团组建、组织管理、质量管理体系、人力资源管理体系、财务风险管控和企业综合咨询等服务。
        并与100多家企业建立长期战略伙伴的合作关系。
    </textarea>
    <button>Outline off</button>
    <button>Outline on</button>
    <script>
        var buttons=document.getElementsByTagName("button");
        for(var i=0;i<buttons.length;i++){
            buttons[i].onclick=function(e){
                var elem=document.getElementById("second");
                if(e.target.innerHTML=="Outline off"){
                    elem.style.outline="none";
                }else{
                    elem.style.outlineColor="red";
                    elem.style.outlineStyle="solid";
                    elem.style.outlineWidth="thick";
                }
            };

        }
    </script>
</body>
</html>


相关文章推荐

CSS学习笔记(三)布局 背景 字体 文本 边框 列表 复杂样式一一相关属性

CSS 背影相关属性效果:                            background-color              设置背景颜色                      ...

CSS边框和背景相关属性

代码: 文本相关属性 .one{font-size:18px; font-family:Arial, Helvetica, sans-serif; font-style:obli...

Android技巧之shape实现控件圆角,背景,边框等属性

好咧,今天带给大家的是一个小技巧。

CSS样式设置语法全解,样式优先级、值和单位、字体、文本、块级元素,行内元素,替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景

选择器优先级、值和单位、字体、文本属性、替换元素、非替换元素、行内元素、块级元素、元素显示display、边距 边框、颜色 背景、浮动、定位、表布局、单元格、列表、光标、轮廓/* 选择器优先级:...

CSS揭秘读书笔记-第二章 背景与边框

半透明边框默认情况下,背景会延伸到边框所在的区域的下层。如果要给一个容器添加半透明白色边框,并用白色背景,这样写的话是看不到半透明效果的,white背景会从半透明边框下透出来:border:10px ...

CSS3背景与边框相关样式

1、与背景相关的新增属性: background-clip属性(指定背景可以覆盖到什么范围,在哪些区域可以显示,与背景开始绘制的位置无关): border-box:背景将充满整个内容区域,包含边框...

CSS3-边框和背景

下述内容主要讲述了《HTML5权威指南》第19章关于“使用边框和背景”。 CSS3中边框和样式得到了增强。例如:可以创建圆角边框,使用图像边框,为元素创建阴影。一、应用边框样式表 基本边框属性 属...

CSS3边框 , 背景

CSS3边框 border-radius box-shadow border-image CSS3背景 background-size background-origin background-...
  • safiri
  • safiri
  • 2016年06月27日 17:33
  • 185

CSS学习笔记(2)背景/边框/外延/填充

参考文献: 《HTML, CSS, JavaScript 整合详解》 王津涛 编著,机械工业出版社 1.     CSS背景属性,包括背景颜色、背景图片、背景图片重复等 ...
  • LostPub
  • LostPub
  • 2012年01月15日 22:44
  • 2356
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS的边框和背景属性
举报原因:
原因补充:

(最多只允许输入30个字)