[CSS3] 边框 Border

最新推荐文章于 2024-04-25 18:36:27 发布

LINJY6

最新推荐文章于 2024-04-25 18:36:27 发布

阅读量397

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/linjiayuqazwsx/article/details/50202235

版权

CSS3 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

[1] Border

border: border-width border-style border-color
(eg: border-style: dotted/ solid/ dashed)
这里写图片描述

[2] Border-radius

border-radius: 左上右上右下左下
这里写图片描述

[3] Border-radius 应用

(3-1) 圆形

border-radius 制作圆形条件：
(1) width=height
(2) border-radius:50%;

这里写图片描述

(3-2) 半圆

border-radius 制作半圆
(1) width 是height 2倍长度 (圆口是上下)
height 是width 2倍长度 (圆口是左右)
(2) border-radius 为min(width, height)长度

这里写图片描述

(3-3) 扇形

/* border-radius 制作扇形
(1) width = height
(2) border-radius 为宽度的长度
*/
这里写图片描述

(3-4) 椭圆

border-radius 制作椭圆
水平椭圆:
(1) width = 2 height
(2) border-radius= width px /height px
垂直椭圆:
(1) 2 width = height
(2) border-radius= height px / width px

这里写图片描述

[4] Border-image

[5] Box-shadow

box-shadow: h-shadow v-shadow blur color
h-shadow 水平
v-shadow 垂直
blur 模糊距离

这里写图片描述

<div>
<img src="1.jpg">
<span>Chinadaily is the largest English portal in China, providing news, business information, BBS.</span>
</div>

div{
    width:220px;
    height:310px;
    background: #E9E9E9;
    border-radius: 15px;/*圆角*/
    box-shadow:2px 2px 3px #aaaaaa;/*阴影*/
    font-family:"Times New Roman",Georgia,Serif;

}
img{
/*img 虽然本身是个内联 但是表现出来的是一个inline-block 可以定义长度 宽度 也可以用margin padding*/
    width:200px;
    height:200px;
    display: inline-block;
    margin: 10px;
    border-radius: 5px;
}
/*span 就是一个内联块, 为了让他可以margin padding 定义display*/
span{
    text-indent: 25px;
    text-align: justify;
    display: inline-block;
    margin:0 10px;
}