CSS3(1)---圆角边框、边框阴影

zhanghao

2019-12-12

关注关注

CSS3(1)---圆角边框、边框阴影

CSS3可以简单理解成是CSS的增强版，它的优点在于不仅有利于开发与维护，还能提高网站的性能。

一、圆角边框

圆角在实际开放过程中，还是蛮常见的。以前基本是通过背景图片做的，有了CSS3后可以使用简单的属性搞定，可以通过border-radius设置元素的圆角半径。

1、圆角边框语法

圆角边框属性 : border-radius

属性值

border-radius: 属性1，属性2，属性3，属性4
# 四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
border-radius: 属性1，属性2，属性3
# 三个值：上->左右->下
border-radius: 属性1，属性2
# 两个值：上下->左右
border-radius: 属性1
# 一个值：四个圆角值相同

对于每个边角也可以单独写

border-top-left-radius:10px;      // 定义了左上角的弧度半径为10px
border-top-right-radius:5px;      // 定义了右上角的弧度5px;
border-bottom-right-radius:10px;  // 定义了右下角的弧度
border-bottom-left-radius:10px;   // 定义了左下角的弧度

2、示例

1）画圆弧

<!DOCTYPE html>
<html>
<head>
    <title></title>
 <style type="text/css">
div {
    width: 200px;
    height: 200px;
    background: pink;
    border-radius: 50px;
}
 </style>
</head>
<body>
    <div></div>
</body>
</html>

运行结果

CSS3(1)---圆角边框、边框阴影

很明显，这里四个圆弧的半径都为50px；

2）画圆

画圆的思路其实很简单,只要保证两点

1、盒子的长和宽要相等

2、圆弧的半径要为盒子长的一半

比如将上面属性修改为：

border-radius: 100px;

再运行

CSS3(1)---圆角边框、边框阴影

很明显这里已经是一个圆了。这里我们来思考为什么要设置圆弧设置盒子长的一半。

其实很简单，要实现圆，那么长和宽就应该相等，同时它们的长度就是直径,那么一半就是半径了。

二、边框阴影

除了可以为元素的四周设置倒圆角以外,CSS3还为我们提供了阴影的功能,能够制作更为精美的外观。

1、边框阴影语法

语法

box-shadow: h-shadow v-shadow blur spread color inset;
# 前两个属性是必须写的。其余的可以省略。

属性值

CSS3(1)---圆角边框、边框阴影

2、示例

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子阴影</title>
    <style>

    div {
        width: 200px;
        height: 200px;
        box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.4);
        /*transition: all 1s;*/
        
    }
    div:hover {  /*鼠标经过div时候的样子。。。*/
        box-shadow: 0 15px 30px rgba(255,0,0,0.5);
    }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

运行结果

CSS3(1)---圆角边框、边框阴影

你如果愿意有所作为，就必须有始有终。(15)

css3阴影 css边框 border-radius css

zhanghao

0 关注 0 粉丝 0 动态

关注关注

来看下css边框阴影怎么设置？这些方法掌握后工作更轻松

我们在网页设计中，通常会使用ps工具来达到图片或者边框阴影、立体等效果。但是如果一些基础效果都需要用p图来完成那就显得效率比较低了。其实可以使用CSS来设置边框阴影，下面本篇文章来给大家介绍一下。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、

jiedinghui 2020-05-14