开发者社区> 任平生78> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

CSS的背景属性和边框属性

简介: CSS的背景属性: background 简写属性,作用是将背景属性设置在一个声明中 background-attachment 背景图像是否固定或者随着页面的其余部分滚动 background-color 设置元素的背景颜色 ba...
+关注继续查看

CSS的背景属性:

background                  简写属性,作用是将背景属性设置在一个声明中
background-attachment       背景图像是否固定或者随着页面的其余部分滚动
background-color            设置元素的背景颜色
background-image            把图像设置为背景
background-position         设置背景图像的起始位置
background-repeat           设置背景图像是否如何重复

实例代码一:

<p style="background-color:pink;
           width:1024px;
           height:600px;
           background-image:url('a.jpg');
           background-repeat:repeat-x;
           ">
    </p>

显示效果:

img_1daa5acba6dce9082d4f58a4b0d931a1.png

小结:

背景的属性有5个,可以直接放在background中.

background的属性顺序不是固定,但是建议顺序为:背景色,背景图,是否扩展,位置,是否固定

在默认情况下,背景图的原点是包含其父元素的左上角,但是设置background-attachment:fixed,则原点变成浏览器视窗的左上角

CSS的边框属性:

border                  简写属性,用于把四个边的属性设置在一个声明
border-style            用于设置元素所有的边框,或者单独地为各边设置边框宽度
border-width            用于为元素的所有边框设置宽度,或者单独的为各边框设置宽度
border-color            设置元素的所有边框中可见部分的,或为四个边分别设置颜色
border-bottom           用于把下边框的所有属性设置到一个声明中 
border-bottom-color     设置元素的下边框的颜色
border-bottom-style     设置元素的下边框的样式
border-bottom-width     设置元素的下边框的宽度
border-left             用于把左边框的所有属性设置到一个声明中
border-left-color       设置元素的左边框的颜色
border-left-style       设置元素的左边框的样式
border-left-width       设置元素的左边框的宽度
border-right            用于把右边框的所有属性设置到一个声明中
border-right-color      设置元素的右边框的颜色
border-right-style      设置元素的右边框的样式
border-right-width      设置元素的右边框的宽度
border-top              用于把上边框的所有属性设置到一个声明中
border-top-color        设置元素的上边框的颜色
border-top-style        设置元素的上边框的样式
border-top-width        设置元素的上边框的宽度

边框可以设置的样式有:

none            定义无边框
hidden          与"none"相同,对于表,hidden用于解决边框冲突
dotted          定义点状边框
dashed          定义虚线边框
soild           定义实线
double          定义双线,双线的宽度等于border-width的值
groove          定义3D凹槽边框,其效果取决于border-color的值
ridge           定义3D垄状边框,其效果取决于border-color的值
inset           定义3D inset边框,其效果取决于border-color的值
outset          定义3D outset边框,其效果取决于border-color的值
inherit         规定应该从父元素继承边框样式

实例代码二:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div-box{
            width:300px;
            height:150px;
            /*border的三个属性值分别是:宽度,样式,颜色*/
            border:3px solid red;
        }
    </style>
</head>
<body>
<div id="div-box">
hello world!
</div>
</body>
</html>

效果如下:

img_783938a05cea98202cbf7b7f557c2744.png

实例代码三:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin:0;/*指定主页面距离父标签的距离*/
            padding:0;
        }
        #div-box{
            width:800px;/*指定灰色边框的宽度*/
            height:500px;/*指定灰色边框匠高度*/
            border:1px solid grey;/*定义边框为1px的实线灰色边框*/
            margin:20px 0 0 20px;/*定义灰色边框距离上个标签20px的距离,距离浏览器边界20px*/
        }
        .img_list{
            list-style:none;/*图像列表无样式*/
            background-color:pink;
        }
        .img_list img{
            width:125px;/*定义每个图像的宽度为125px*/
            height:85px;/*定义每个图像的高度训85px*/
            margin:10px 0 0 20px;/*定义每个图像距离红色边框上边10px,左边20px*/
        }
        .img_list li{
            float:left;/*使用左浮动*/
            border:1px solid red;/*定义每个图像的边框为1px的实线红色边框*/
            width:165px;/*定义每个边框的宽度为165px*/
            height:125px;/*定义每个边框的高度为125px*/
            margin:10px 0 0 10px;/*定义红色边框距离上个标签和左边的标签的距离各为10px*/
        }
        .img_list a{
            display:block;/*把字体转换为块元素*/
            margin-left:60px;/*超链接的字体距离红色边距左边距离为60px*/
            margin-top:-3px;/*超链接的字体距离红色边框下边距离为-3px*/
        }
        .img_list a:hover{
            color:red;/*鼠标悬浮上超链接时,字体变成红色*/
            text-decoration:underline;/*鼠标悬浮上超链接时,字体加下划线*/
        }
    </style>
</head>
<body>
<div id="div-box">
    <ul class="img_list">
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
        <li><img src="a.jpg"><span><a href="#">小狗</a></span></li>
    </ul>
</div>
</body>
</html>

效果显示为:

img_ca29f7b363acb6e6c291a8e1464cf65e.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
CSS3背景相关属性
本文介绍CSS3背景相关属性
0 0
CSS3文本相关属性
本文介绍CSS3文本相关属性
0 0
CSS3文本字体相关属性
本文介绍CSS3文本字体相关属性的用法
0 0
css文字自动换行 及css文字相关属性
css文字自动换行 及css文字相关属性
0 0
css Matrix属性详解
css Matrix属性详解
0 0
HTML5 标签释义 CSS3属性释义
HTML5 标签释义 CSS3属性释义
0 0
JS DOM之操作CSS属性
在JavaScript中,我们可以使用getComputedStyle()方法来获取一个CSS属性的取值 语法:
0 0
实用CSS属性——object-fit
我们常常将图片或者视频放在一个盒子内,那么就经常在业务上考虑适配的问题,而object-fit能帮助我们设定图片在盒子中的显示方法
0 0
一个元素纯CSS实现开关按钮【介绍box-shadow、单边或多重阴影、appearance属性】
借助checkbox表单元素、:checked伪类、::before/::after伪元素,就可以只需一个input[type="checkbox"]元素,通过纯CSS实现Switch开关效果的按钮.
0 0
CSS3的3D相关属性总结
项目中遇到微交互、增加页面用户体验的需求,运用CSS3的transform变化的3D属性就可以达到效果。
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载