关闭

CSS的边框和背景属性

标签: 前端网页设计htm5css
479人阅读 评论(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].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>


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:402435次
    • 积分:5740
    • 等级:
    • 排名:第4506名
    • 原创:209篇
    • 转载:80篇
    • 译文:0篇
    • 评论:45条
    文章分类
    最新评论