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>


HTML_05__css_li标签边框_背景属性

背景属性 background-color:red; background-image:url(图片地址); background-repeat:no-repeat;//repeat...
  • jankin6
  • jankin6
  • 2016年10月22日 23:18
  • 1829

CSS:设置边框和背景

应用边框样式边框基本设置首先简单介绍一下使用边框最常用的三个基本属性: 属性 说明 值 border-width 设置边框的宽度 度量单位(em、px、cm等) border...
  • Hierarch_Lee
  • Hierarch_Lee
  • 2016年09月26日 11:35
  • 8137

CSS3的内径剪切问题(背景边框是虚线)

Document div{ width: 300px; height: 300px; border:2...
  • java_zhaoyanli
  • java_zhaoyanli
  • 2016年05月25日 11:40
  • 439

CSS学习(六)-css圆角边框高级效果、边框阴影效果(上)

一、理论: 1.border-radius: a.表格应用圆角:表格必须使用border-collapse属性为separate,表格圆角才能正常显示 b.圆形:元素的宽度和高度相同,圆角的半径...
  • bwshqh
  • bwshqh
  • 2016年03月04日 01:05
  • 1724

CSS中元素的边框border属性

元素的边框一般用来分隔页面的各个部分,在CSS中,边框属性可以分为以下几个属性,包括边框样式(border-style),边框宽度(border-width), 边框颜色(border-color)...
  • woshisap
  • woshisap
  • 2013年01月08日 16:53
  • 3212

css 使用background背景实现border边框效果

css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需...
  • wuxiaopeng_1986
  • wuxiaopeng_1986
  • 2016年10月09日 12:15
  • 1524

【解决方案】去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景

1、使用Chrome的都知道,当鼠标焦点在input、textarea这些元素上时,Chrome默认的会给它们加上黄色的边框,我以前一直以为这是chrome的特性,没法去掉,原来是css的效果,out...
  • fifteen718
  • fifteen718
  • 2017年03月22日 17:25
  • 2003

CSS3 边框/颜色/文字与字体/背景

一、边框 1、圆角效果 border-radius 语法:border-radius: 左上角,右上角,右下角,左下角;或者border-radius:所有角都为一个值的圆角; 实心上半圆: 方法...
  • AGhosts
  • AGhosts
  • 2016年10月28日 16:28
  • 303

css3-边框 圆角 阴影 等属性

右上——》右下--》左下*/-->
  • gyq04551
  • gyq04551
  • 2016年11月21日 20:26
  • 174

CSS边框和背景

1.border-width     取值是常规CSS长度,可以使用em,px,cm,百分数,thin,medium,thick 2.border-style     none    没边框 ...
  • Lxiaohuli
  • Lxiaohuli
  • 2017年03月20日 07:14
  • 129
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS的边框和背景属性
举报原因:
原因补充:

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