CSS学习（六）-css圆角边框高级效果、边框阴影效果（上）

最新推荐文章于 2024-05-22 09:30:33 发布

bwshqh

最新推荐文章于 2024-05-22 09:30:33 发布

阅读量4.6k

点赞数

分类专栏： css css学习文章标签： css css3 class

本文链接：https://blog.csdn.net/bwshqh/article/details/50793919

版权

摘要由CSDN通过智能技术生成

一、理论：
1.border-radius:
a.表格应用圆角:表格必须使用border-collapse属性为separate，表格圆角才能正常显示
b.圆形:元素的宽度和高度相同，圆角的半径值50%(或高度的一半)
c.半圆:元素的宽度与圆角方位配合一致，以不同的高度比例等项即可制作半圆
d.扇形:元素的宽度、高度、半径值相同，根据圆角位置不同可制作不同的扇形
e.椭圆:需要设置圆角的水平和垂直方向的半径值
2.border-shadow:
a.none: 无阴影
b.inset: 区分内外阴影
c.x-offset:阴影水平偏移量
d.y-offset:阴影垂直偏移量
e.blur-radius:阴影模糊半径
f.color:颜色

二、实践：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div1{
            width: 50px;
            height: 50px;
            background-color: #239285;
            margin: 30px;
        }
        .div2{
            width:100px;
            height: 50px;
            background-color: #239587;
            border-radius: 50px 50px 0 0;
        }
        .div3{
            width: 50px;
            height: 100px;
            background-color: #231587;
            border-radius: 0 50px 50px 0;
        }
        .div4{
            width: 100px;
            height: 50px;
            background-color: #219587;
            border-radius: 0 0 50px 50px;
        }
        .div5{
            width: 50px;
            height: 100px;

最低0.47元/天解锁文章

bwshqh

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS学习（六）-css圆角边框高级效果、边框阴影效果（上）

一、理论：1.border-radius:a.表格应用圆角:表格必须使用border-collapse属性为separate，表格圆角才能正常显示b.圆形:元素的宽度和高度相同，圆角的半径值50%(或高度的一半)c.半圆:元素的宽度与圆角方位配合一致，以不同的高度比例等项即可制作半圆d.扇形:元素的宽度、高度、半径值相同，根据圆角位置不同可制作不同的扇形e.椭圆:需要设置圆
复制链接

扫一扫