CSS的边框和背景属性

最新推荐文章于 2019-10-31 00:39:15 发布

bboyjoe

最新推荐文章于 2019-10-31 00:39:15 发布

阅读量951

点赞数

分类专栏： CSS 文章标签：前端网页设计 htm5 css

本文链接：https://blog.csdn.net/bboyjoe/article/details/46833605

版权

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

边框：

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].οnclick=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>

bboyjoe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的边框和背景属性

border——设置所有边的边框（）；border-top、border-bottom、border-left、border-right——设置一条边的边框（）；border-width——设置所有边的边框宽度；border-style——设置所有边的边框样式；border-color——设置所有变的边框颜色；border-top-width、border-top-style、
复制链接

扫一扫