【web前端】CSS笔记小结 圆角矩形+盒子阴影+文字阴影（Day 4）

已于 2022-04-28 10:00:38 修改
阅读量564 收藏 1
点赞数 1
分类专栏： web 文章标签： css3 css 前端
于 2022-04-21 15:23:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61096287/article/details/124315391
版权

来源：黑马程序员pink老师前端入门教程

目录

I. 圆角边框

①原理

②使用 

疑惑qwq！

③圆形、圆角矩形及不同圆角的实现

II. 盒子阴影

III. 文字阴影

I. 圆角边框

①原理

eg. 不同length的对比

                          100px                                                                                      50px

 代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            display: inline-block;
            width: 200px;
            height: 300px;
            background-color: aquamarine;
            margin: 100px;
            text-align: center;
            line-height: 300px;
            font-size: 25px;
            font-family: 'Times New Roman', Times, serif;
        }
        
        .box1 {
            border-radius: 100px;
        }
        
        .box2 {
            border-radius: 50px;
        }
    </style>
</head>

<body>
    <div class="box1">用例1</div>
    <div class="box2">用例2</div>

</body>

</html>

②使用 

PS. 1）超出50%的按50%的效果算；

eg.效果：

                          200px                                                                                       50px

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            display: inline-block;
            width: 200px;
            height: 300px;
            background-color: aquamarine;
            margin: 100px;
            text-align: center;
            line-height: 300px;
            font-size: 25px;
            font-family: 'Times New Roman', Times, serif;
        }
        
        .box1 {
            border-radius: 100%;
        }
        
        .box2 {
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="box1">用例1</div>
    <div class="box2">用例2</div>

</body>

</html>

2）矩形+length=1/2*height→圆角矩形

eg.效果：

            1/2width                                                           1/2height

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            display: inline-block;
            width: 100px;
            height: 300px;
            background-color: aquamarine;
            margin: 100px;
            text-align: center;
            line-height: 300px;
            font-size: 25px;
            font-family: 'Times New Roman', Times, serif;
        }
        
        .box1 {
            border-radius: 50px;
        }
        
        .box2 {
            border-radius: 150px;
        }
    </style>
</head>

<body>
    <div class="box1">用例1</div>
    <div class="box2">用例2</div>

</body>

</html>

疑惑qwq！

为什么1/2宽和1/2高的效果是一样的啊？←我还以为宽的那个会更不明显一点的ಥ_ಥ！！！

希望有大佬能解答一下qwq！！！

③圆形、圆角矩形及不同圆角的实现

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            display: inline-block;
            background-color: aquamarine;
            margin: 100px 25px;
            text-align: center;
            font-size: 25px;
            font-family: 'Times New Roman', Times, serif;
        }
        
        .box1 {
            width: 300px;
            height: 300px;
            line-height: 300px;
            border-radius: 50%;
        }
        
        .box2 {
            width: 300px;
            height: 100px;
            line-height: 100px;
            border-radius: 50px;
        }
        
        .box3 {
            width: 300px;
            height: 500px;
            line-height: 500px;
            border-radius: 10px 50px 20px 100px;
        }
    </style>
</head>

<body>
    <div class="box1">用例1——圆形</div>
    <div class="box2">用例2——圆角矩形</div>
    <div class="box3">用例3——不同圆角</div>

</body>

</html>

II. 盒子阴影

h→正右负左，v→正上负下，spread→正大负小

PS. div也可以有 :hover 

eg.代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新浪导航</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            display: inline-block;
            background-color: aquamarine;
            margin: 100px;
            text-align: center;
            font-size: 30px;
            font-family: 'Times New Roman', Times, serif;
            width: 200px;
            height: 200px;
            line-height: 200px;
        }
        
        div:hover {
            box-shadow: 10px 30px blue inset;
        }
    </style>
</head>

<body>
    <div>影子样例</div>
</body>

</html>

效果：一截图把鼠标截没了qwq！

III. 文字阴影

eg.代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            text-align: center;
            color: aqua;
            font-size: 80px;
            font-weight: 700;
            font-family: 'Times New Roman', Times, serif;
            text-shadow: 10px 10px 5px blueviolet;
        }
    </style>
</head>

<body>
    <P>字体样例</P>
</body>

</html>

效果：

恭喜看到这的小伙伴，你已经完成 CSS第四天的学习了~！

下面进入第五天的学习吧(★ ω ★)→第五天

有用的话就点赞评论收藏嗷！！

进击的文文文
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html文字外阴影效果,如何用css实现文字阴影？
weixin_33223159的博客
06-03 772
阴影效果是一个常见也很实用的效果，相信有些朋友在使用阴影效果来美观网页页面时，有时会有一些疑问，比如：字体文字阴影是怎样设置的等等。下面本篇文章就来给大家介绍一下使用CSS实现文字阴影效果的方法，希望对大家有所帮助。在CSS中，可以使用text-shadow属性来实现文字阴影效果；text-shadow属性应用于阴影文本。语法：text-shadow: h-shadow v-shadow blur...
js 滑块插件slider
08-21
这是基于jquery的插件，完全满足时间，数字的插件。 参考示例：http://www.jq22.com/jquery-info6088 请测有效！！！
Font Awesome网页字体图标库 5.10.2
11-05
FontAwesome是一款基于CSS框架的网页字体图标库，它完全，为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可用CSS的样式，除此之外，还有SVG框架，流行前端库(如
Web-resume
03-05
网络简历 Web简历（PC）项目描述： 实现技术：CSS + HTML + H5 + CSS3 + Jqury 1.共有5个div组成5个页面 2.第一个页面，中间有个开头自我介绍板，只要鼠标移至上方，就会出现立体视觉效果。使用了CSS3，给div添加阴影部分，并用伪类：hover用于鼠标移至和开启和取消元素类。 3.右侧有一个菜单按钮，通过JQuery控制进行开启菜单。点击菜单里面的超链接平滑到达5个页面标题的位置。 4.更新了外部的Highcharts图表库，用于更好的显示数据。 5.最后的页面使用了CSS3的2D转换和过渡效果呈现旋转显示和消失的特效。当鼠标移至2018的字体时，就会出边效果。 音乐达人介绍页面（PC和H5）项目描述： 实现技术：CSS + HTML + H5 + CSS3 + Jqury 1.采用的是响应式布局，可以PC端和手机端显示。 2.使用了HTM
字体图标元件库.zip
07-20
您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。Font Awesome字体图标具有轻量和友好的特性，非常适合在Axure原型设计中进行应用，用它来制作具有交互样式的按纽和组件会变得非常方便。字体图标的样式设置方法跟设置字体的样式是相同的，选中图标字符在字体样式中就可以进行设置。除此之外，我们还可以对包含字体图标的元件设置选中、悬停、禁用等各种交互样式。 目录中还单独提供了FontAwesome全部图标的Svg格式，使用SVG格式图标不需要安装字体文件或设置WEB字体选项，直接将对应的图标文件拖入到Axure编辑界面中即可。SVG格式图标同样是矢量的，支持无限放大，同时在Axure中右击图标可转为化形状，然后可以修改它的颜色或其它样式。
Web前端开发-为网页元素添加阴影效果
Zero
04-26 2472
效果图 .html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>为网页元素添加阴影效果</title> <link href="../2.css/03.为网页元素添加阴影效果.css" rel="stylesheet" t...
先序建立一颗二叉树，并且后序遍历它 7075
喝泉水的泉
11-10 1万+
#include <iostream> #include<bits/stdc++.h> using namespace std; typedef struct node{ char data; struct node *lchild,*rchild; }treeno,*treenode; void cre(treenode &root){ char x; cin>>x; if(x=='@') root=NULL; else{ root=new treeno..
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 1951
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
CSS系列之圆角边框（CSS3）
老__L的博客
01-30 1万+
本文主要介绍CSS的border-bottom-left-radius、border-bottom-right-radius、border-radius、border-top-left-radius、border-top-right-radius属性。圆角边框（CSS3）
使用Div+CSS纯图片实现圆角矩形的方法小结
09-24
主要介绍了使用Div+CSS纯图片实现圆角矩形的方法小结,CSS3中用代码绘制圆角矩形非常方便,而本文要介绍的则是利用图片来实现兼容性更强的方法,需要的朋友可以参考下
web前端期末结课大作业html+css+javascript大学实验教学示范中心HTML网站模板
06-18
大学实验教学示范中心HTML网站模板，DIV+CSS布局设计，两套蓝色风格HTML网站模板，全套模板，包括注册、登录、首页、新闻中心、...web前端期末结课大作业html+css+javascript网页设计大学实验教学示范中心HTML网站模板
Web前端学习笔记：HTML5+CSS3+JavaScript.pdf
03-19
Web前端学习笔记：HTML5+CSS3+JavaScript.pdf
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
最新发布
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡
星辰迷上大海的博客
05-17 3413
Web前端，CSS背景图片大小、文字阴影、盒子阴影、过渡
js学习--验证码的实现
lmd_hdx的博客
06-17 3732
使用js制作验证码，学习中随笔练习有错可以指出。
列传行sql
热门推荐
iechenyb专栏
02-10 4万+
1 select u.userid , (select jueseid from view_user_juese v1 where v1.userid=u.userid and jueseid=1) as jbr, (select jueseid from view_user_juese v1 where v1.userid=u.userid and jueseid=2) as fhr,
css表单单选框、复选框、上传文字和隐藏字段、下拉菜单、文本域、字段集
YY的博客
09-20 3789
css表单单选框、复选框、上传文字和隐藏字段、下拉菜单、文本域、字段集
js-验证码插件gVerify.js
ddr66288的博客
09-13 372
这几天在做登录时需要输入验证码，可后端那边由于受限制，导致只能返回给前端验证码的文字，下面就把源码附上： 插件gVerify.js !(function(window, document) { function GVerify(options) { //创建一个图形验证码对象，接收options对象为参数 this.options = { //默认...
web前端期末结课大作业 html+css+javascript网页设计代码
06-07
很抱歉，我不能帮你直接提供代码。但是，我可以给你一些建议和指导，帮助你完成这个项目。 首先，你需要确定你的网页设计主题和目标受众。然后，你需要创建HTML文件并编写页面的基本结构，包括头部、主体和底部。在HTML文件中，你需要使用语义化标签来描述页面内容，这有助于SEO优化和提高页面可访问性。 接下来，你需要使用CSS样式来美化页面。你可以使用CSS的各种属性来调整颜色、字体、布局和其他元素的样式。你可以使用CSS框架或预处理器来简化样式表的编写，例如Bootstrap或Sass。 最后，你可以使用JavaScript来添加交互性和动态元素。你可以使用JavaScript库和框架来简化编写，例如jQuery或React。 总之，完成这个项目需要耐心和实践，希望我的建议能对你有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

进击的文文文

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值