柴少鹏的官方网站 技术在分享中进步,水平在学习中升华

CSS之边框和元素背景学习(三)

css的注释就是/* 内容  */。

一、CSS的边框

1.1 border

       border属性是css盒子模型基础属性之一。
       关于border的3个属性,分别为border-width、border-style、border-color。其中,border-color默认为元素内容的前景色;border-width默认为关键字medium,但是border-style默认值为none;所以,不指定border-style,边框将不存在。

先来一个例子了解下:

    <style type="text/css">
        p{
            border: 5px solid black;
        }
        /* 从左向右是宽度,样式,颜色 */
        div{
            border-width: 10px;
            border-style: solid;
            border-color: green;
        }
    </style>
</head>
<body>
   <div>
       <a>哈哈</a>
       <span>嘟嘟嘟</span>
   </div>
   <p>
       要飞起,就要努力。
   </p>
</body>

 图片.png

#从效果可以看出p元素定义的border样式和div标签定义的border样式效果是一致的。        

border-style属性的值:

图片.png

    <style type="text/css">
        span { width:160px; height: 100px; margin: 5px; display: block; float: left; text-align: center;line-height: 100px;}
        .border-none { border-style: none;}
        .border-dashed { border-style: dashed;}
        .border-dotted { border-style: dotted;}
        .border-double { border-style: double;}
        .border-groove { border-style: groove;}
        .border-inset { border-style: inset;}
        .border-outset { border-style: outset;}
        .border-ridge { border-style: ridge;}
        .border-solid { border-style: solid;}
    </style>
</head>
<body>
<div>
    <span class="border-none">None</span>
    <span class="border-dashed">Dashed</span>
    <span class="border-dotted">Dotted</span>
    <span class="border-double">Double</span>
    <span class="border-groove">Groove</span>
    <span class="border-inset">Inset</span>
    <span class="border-outset">Outset</span>
    <span class="border-ridge">Ridge</span>
    <span class="border-solid">Solid</span>
</div>
</body>

图片.png

#上图就是各个样式的效果图。

定义一条边应用边框样式:

       元素的四条边可以应用不同的边框样式,这就要用到特定属性,如下表所示:

图片.png

可以使用这些元素为元素的边应用边框样式,也可以将它们与更为通用的属性结合使用来颠覆特定的边框样式。下面是一个例子看一下:

    <style type="text/css">
        p{
            border-width: 5px;
            border-style:solid;
            border-color: black;
            border-left-width: 10px;
            border-left-style: dotted;
            border-top-width:10px;
            border-top-style: dotted;
            width: 60px;
        }
    </style>
</head>
<body>
<div>
<p>
    牛起来少年!
</p>
</div>
</body>

图片.png

#从上面的效果可以看出左边和上面的边框使用的是dotted样式,也就是圆点虚线样式。

使用border简写属性:

       最上面的小例子已经演示过了简写方式,也可以不用分开设置样式、宽度和颜色,而使用简写属性以此搞定。下面用个小例子:

    <style type="text/css">
        p{
            border:medium solid black;
            border-top:solid 10px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div>
        <p>
            飞起来少年!
        </p>
    </div>
</body>

图片.png

#从上面的例子可以看出,可以将属性值简写,没有写就用默认的。

将图像用作边框

       边框不仅限于用 border-style属性定义的样式,可以用图像为元素创建真正的自定义边框。配置图像边框各个方面的属性有5个,外加一个可以在一条声明中配置所有特征的简写属性。

图片.png

切分图像:

    <style type="text/css">
        p{
            border: 30px solid black;
            border-image: url("2.jpg") 40 / 30px;
            width:200px;
            height: 300px;
        }
    </style>
</head>
<body>
   <p>切割一波</p>
</body>

图片.png

#切分值和边框宽度值之间使用了 / 字符进行分割。可以为元素的每条边指定不同的宽度,不过此处只提供了一个值(30px),即四条边都会使用这个值。

二、设置元素的背景

首先列一下背景属性:

#属性              #说明
background-color   #设置元素的背景颜色,总是显示在背景图像下面    
background-image    #设置元素的背景图像,如果指定一个以上的图像,则后面的图像绘制在前面的图像下面    
background-repeat   #设置图像的重复样式    
background-size    #设置背景图像的尺寸    
background-position    #设置背景图像的位置    
background-attachment    #设置元素中的图像是否固定或随页面一起滚动    
background-clip    #设置背景图像裁剪方式    
background-origin  #设置背景图像绘制的起始位置    
background    #简写属性

2.1 设置背景颜色和图像

    <style type="text/css">
       p{
           border: medium solid black;
           background-color: #00b3ee;
           background-image: url("2.jpg");
           background-size: 40px 30px;
           background-repeat: repeat-x;
           width: 400px;
           height: 300px;
           color: red;
       }
    </style>
</head>
<body>
   <p>背景走一波白!</p>
</body>

图片.png

#可以看见背景图片有了,然后背景图片呗变成了40px*30px大小,然后是水平方向平铺,然后字体颜色是红色写到了背景图上。背景色的效果也出现了。

值        #说明
repeat    #水平和垂直方向同时平铺图像,图像可能被截断    
repeat-x   #水平方向平铺图像,图像可能被截断    
repeat-y   #垂直方向平铺图像,图像可能被截断    
no-repeat   #禁止平铺图像

再来一个例子:

图片.png

    <style>
        .img{
            width: 1300px;
            height: 400px;
            /*设置背景颜色,就算背景图不能正常访问,背景颜色也是可以生效的*/
            background-color: #8E1717;
            background-image: url("icon_18_118.png");
        }
    </style>
</head>
<body>
   <div style="margin: 0 auto;">
       <div class="img"></div>
   </div>
</body>

图片.png

#可以看到一张小图,实现了x轴和y轴无限重复(只到把所有div占满)。

    <style>
        .img{
            width: 1300px;
            height: 400px;
            background-color: #8E1717;
            background-image: url("icon_18_118.png");
            background-repeat: repeat-x; /*定义了只横向重复*/
        }
    </style>
</head>
<body>
   <div style="margin: 0 auto;">
       <div class="img"></div>
   </div>
</body>

图片.png

#从效果图上面可以看出图片实现了横向重复

    <style>
        .img{
            width: 1300px;
            height: 400px;
            background-color: #8E1717;
            background-image: url("icon_18_118.png");
            background-repeat: no-repeat;  /*这是不纵和横向平铺*/
            background-repeat: repeat-x;  /*只能存在一种平铺重复效果,所以这里横向平铺被下面的纵向平铺取代了*/
            background-repeat: repeat-y;  /*纵向平铺*/
        }
    </style>
</head>
<body>
   <div style="margin: 0 auto;">
       <div class="img"></div>
   </div>
</body>

图片.png

#从效果图上看实现了垂直方向重复平铺效果

2.2 设置背景图像的尺寸

background-size该属性用于设置背景图片的大小,主要可以通过四种类型的单位设置:

值        #说明
像素值    #可以通过像素“px”精确地设置背景图片的大小。需要设置为两个值,第一个值表示背景图的宽度,第二个值表示背景图的高度,还可以通过设置宽度或高度的其中一个,将另外一个值设置成“auto”达到保持背景图原始图像比例的效果。如:“240px 120px”、“180px auto”或“auto(相当于还原默认的大小)”。    
百分比    #用“百分比”作为值,结构和用“像素值”一致,也是两个值,第一个值是相对于元素宽度的百分比值,第二个值是相对于元素高度的百分比。如:“100% 80%”、“100% auto”或“auto 50%”。    
contain   #等比例缩放图像,使其宽度、高度中较大者与容器横向或纵向重合,背景图像始终包含在容器内    
cover    #等比例缩放图像,使图像至少覆盖容易,有可能超出容器    
auto    #默认值,图像以本身尺寸完全显示

#contain值确保图像调整尺寸后,整个图像始终包含在元素内部。浏览器判断图像长度和高度哪个更大,并将较大者调整至容器相应宽度或者高度大小。相反,如果属性取cover值,浏览器选中较小的值,并沿着该方向调整图像大小。这就意味着图像的某一部分可能不会显示,从下图可以看出两者的不同之处。

    <style type="text/css">
        p{
            border:medium solid black;
            background-color: lightgray;
            background-image: url("2.jpg");
            background-repeat: no-repeat;
            width: 100px;
            height: 100px;
        }
        #first{background-size: cover;}
        #second{background-size: contain;}
        #three{background-size: auto;}
    </style>
</head>
<body>
    <div>
        <p id="first">
            cover测试
        </p>
        <p id="second">
            contain测试
        </p>
        <p id="three">
            auto测试
        </p>
    </div>
</body>

图片.png

#看第一张图cover是把整张大图缩放成了一张小图,第二张图contain呢是按比例缩放了图片所以底部有阴影,第三张图auto呢是图片本身尺寸显示因为图很大p元素的长宽有限所以就显示了个左上角。

2.3 设置背景图像位置

       浏览器使用 background-position 属性设置背景图像的位置。图像不平铺的时候这个属性用得最多。该属性的使用方法如下面代码所示:

    <style type="text/css">
        p{
            border:10px double black;
            background-color: lightgray;
            background-image: url("2.jpg");
            background-size:40px 40px;
            background-repeat: no-repeat;
            background-position: 30px 10px;
            width: 100px;
        }
        #first{background-size: cover;}
    </style>
</head>
<body>
   <div>
       <p id="first">
           图像尺寸测试
       </p>
   </div>

图片.png

#从上图可以看到背景图片在距离x轴30px,y轴10px的位置。background-position属性是通过平面上的x与y坐标定位的,所以通常取两个值.

图片.png

#这个属性设置背景图像(由backgroup-image定义)的位置,背景图像如果要重复,将从这一点开始。提示:您需要把backgroud-attachment属性设置为“fixed”,才能保证该属性在Firefox和Opera中正常工作。top left,top center,top right,center left,center right,bottom left,bottom center,bottom right:如果您仅规定了一个关键词,那么第二个值将是“center”。默认值:0% 0%。x% y%:第一个只是水平位置,第二个值是垂直位置。左上角是0% 0%,右上角是100% 100%。如果您仅规定了一个值,另一个值将是50%。xpos xpos:第一个值是水平位置,第二值是垂直位置。左上角是0 0.单位是像素(0px 0px)或任何其他的CSS单位。如果您仅规定了一个值,另一个值将是50%。您可以混合使用%和position值。

再来一个小例子,利用那个点赞的小图片把点赞的小手搞出来:

    <style>
        .pic_move{
            height: 19px;
            width: 19px;
            border: 1px solid red;
            background-image: url("icon_18_118.png");
            background-repeat: no-repeat;
            background-position-x: 0;
            background-position-y: -19px;  /*图片的Y轴上面起点位置向下移动19px*/
            /*background-position: 0 -19px;*/  /*当然也可以这样*/
        }
    </style>
</head>
<body>
   <div class="pic_move" ></div>
</body>

图片.png

#可以看到上图只把小图取出来了。

再来一个例子写一个登陆页面:

<body>
   <span style=" width:80px;display: inline-block">用户名:</span>
   <div style="height: 30px;width: 400px;position: relative;">
         <input type="text" style="height: 25px;width: 370px;padding-right: 30px;">
         <span style="position: absolute;right: 6px;top:6px;background-image: url(icon_18_118.png);height: 16px;width: 16px;display: inline-block;"></span>
    </div>
    <span style=" width:80px;display: inline-block">密码:</span>
   <div style="height: 30px;width: 400px;position: relative;">
         <input type="text" style="height: 25px;width: 370px;padding-right: 30px;">
         <span style="position: absolute;right: 6px;top:6px;background-image: url(icon_18_118.png);height: 16px;width: 16px;display: inline-block;"></span>
   </div>
</body>

图片.png

#上面的效果就是再用户输入用户名和密码的input框里右侧都有一个小图标。

#还有好多好多呢就先不记录了,不是专门搞前端的。

2.4 长宽高等再设置一把

<body>
    <div style="height: 48px;
        width:40%;
        border: 1px solid red;
        font-size: 16px;
        text-align: center;
        line-height: 48px;
        font-weight: bold;
    ">文字位置测试</div>
</body>

图片.png

#从上面可以看到这个div元素的高是48px,宽占屏幕宽度的40%,边框是实体红色,字体大小是16px,文字是水平方向居中的,行高是48px,字体粗细是bold也就是粗体字符。


作者:忙碌的柴少 分类:CSS学习 浏览:795 评论:0
留言列表
发表评论
来宾的头像