CSS3学习笔记：边框与圆角

最新推荐文章于 2023-10-31 18:05:06 发布
最新推荐文章于 2023-10-31 18:05:06 发布
阅读量109 收藏
点赞数
分类专栏： 前端 文章标签： css css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_18404993/article/details/104157209
版权

1.圆角

border-radius:50px;

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.盒阴影

box-shadow属性可以设置一个或多个下拉阴影的框
格式：box-shadow:水平偏移量，数值偏移量，模糊，扩展，颜色，外/内
默认为外阴影
偏移量：
水平方向正值往右，负值往左
竖直方向正值往下，负值往上

box-shadow:50px 30px 0 0 yellow;
box-shadow:50px 30px 0 0 yellow inset;

在这里插入图片描述
内阴影
在这里插入图片描述

3.边界图片

border-image
语法：border-image:source slice width outset repeat;

Zijeak
关注
专栏目录
学习笔记（2):html+css入门-边框圆角
weixin_52311740的博客
12-08 171
本课程是专门为初级量身定制的入门课程，我们不讲学了以后就年薪几十万的鸡汤，也不拿成功学员说事情，我们只讲干货，我们把知识点详细拆分，各个击破，希望对初级的你有帮助。课程主要分为以下几个部分 1.html入门 2.css入门 3.div+css布局 4.css选择器加强 5.百度云下载页实战 6.表格 7.表单...
圆角边框（自学笔记）
zmhxuexi的博客
07-31 503
圆角边框（CSS3） 语法格式： border-radius:50%;<!-- 让一个正方形变成一个圆 --> 四组值：border-radius:1px 1px 13px 2px;<!-- 分别表示左上、右上、右下、左下的圆角--> 三组值border-radius:10px 5px 1px ;<!-- 表示左上为10px、右上和左下为5px、右下为1px--> 二组值border-radius:10px 1px ;<!-- 表示左上和右下为10px、右上和左下
CSS学习笔记11——圆角边框
lxy95512的博客
01-14 413
border-radius属性用于设置元素的外边框圆角。 语法： border-radius: length; radius半径(圆的半径)原理：(椭)圆与边框的交集形成圆角效果。 原理： 注意： 1、参数值可以为数值或百分比的形式。 2、如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。 3、如果是个矩形，设置为高度的一半就可以做。 4、该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角。 border-radi
CSS学习笔记 05、边框、圆角与盒子阴影
每个人都是独一无二的，把握好自己的节奏，跟着自己的心走。
05-06 997
文章目录前言一、边框1.1、边框三要素(width、style、color)1.2、四个方向的边框1.3、去除边框1.4、小案例：利用边框制作三角形二、圆角(border-radius)2.1、圆角以px为单位2.2、圆角以百分比为单位三、盒子阴影(box-shadow)3.1、基本阴影(四个值)3.2、阴影延展(新增一个px值)3.3、内阴影(添加inset关键字)3.4、多阴影(,号隔开设置多个) 前言 本篇博客是关于CSS的边框、圆角和盒子阴影，若文章中出现相关问题，请指出！ 所有博客文件目录索引：博
css3学习个人笔记-边框属性
cherryDemo的博客
10-31 62
边框样式常用值有：无边框(none)， 实线（solid），虚线（dashed），点线（dotted），双实线（double），以上样式可选。用 CSS3，可以创建圆角边框，添加阴影框，下面介绍开发页面常用的边框属性：border，border-radius。设置椭圆边框，需要宽高大小保持一定比例，宽高等大，则为圆形，所以要想设置椭圆边框，注意宽高的比例。语法：border-radius：左上圆角 右上圆角 右下圆角 左下圆角;右下圆角border-bottom-right-radius。
（六）CSS学习笔记:圆角边框、盒子阴影、文字阴影、CSS浮动
he_hongyu的博客
11-05 88
设置圆角边框、盒子阴影、文字阴影、CSS浮动与清除浮动
CSS3学习笔记
qq_52166656的博客
07-10 695
CSS 用于定义网页的样式例如： 选择器指向您需要设置样式的 HTML 元素。声明块包含一条或多条用分号分隔的声明。每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。多条 CSS 声明用分号分隔，声明块用花括号括起来。直接在相应的标签头部进行编写。...
CSS学习笔记3：CSS三大特性、盒子模型
m0_73560798的博客
08-29 82
1、层叠性样式冲突的情况下，遵循就近原则。比如下面，颜色显示为粉色，但是字体大小为14px。2、继承性继承父元素的某些样式，（包括font-/text-/line-以及color）但并不是全部样式。3、优先级案例：1、2、a标签的特殊性4、5、若想把第一个Li改为粉色，怎么办呢显然，用li直接定义样式是不可行的，可以在第一个li标签加上class标签，这样组成复合选择器的权重就是20。
CSS3动画学习笔记记录
qq_59456579的博客
06-09 194
1、CSS标准中各属性都要经历从草案到推荐的过程，CSS3中属性进展都不一样，浏览器厂商在标准尚未明确的情况下提前支持会有风险，所以会加厂商前缀进行区分。2、根据不同的浏览器内核，CSS前缀也不同。（1）、Gecko内核 前缀为 -moz- 火狐浏览器（2）、Webkit内核 前缀为 -webkit- 谷歌浏览器（3）、Trident内核 前缀为 -ms- IE内核浏览器（4）、Presto内核 前缀为 -o- 目前只有opera采用（欧朋支持）
CSS3学习笔记.pdf
最新发布
04-29
### CSS3 学习笔记知识点总结 #### 一、CSS3 简介 - **定义**：CSS3，即层叠样式表第三版，是Web前端开发中的一个重要组成部分，用于控制网页元素的布局和外观。 - **特性**：与CSS2相比，CSS3提供了更多功能强大的...
HTML5+CSS3 markdown笔记
11-17
3. **边框和背景**：支持圆角边框`border-radius`，渐变边框`border-image`，以及多个背景图片和颜色的叠加。 4. **过渡和动画**：`transition`和`animation`属性让元素平滑地改变状态，创建动态效果。 5. **响应...
CSS3学习笔记之立体盒子
03-16
本篇学习笔记将深入探讨如何利用CSS3创建具有立体感的盒子，供所有对Web设计感兴趣的人共享和学习。 首先，我们要了解CSS3中的盒模型。在传统CSS2.1中，盒模型包括内容区域（content）、内边距（padding）、边框...
mongodb远程连接出现connect ECONNREFUSED（连接被拒绝）错误的解决方法
热门推荐
Zijeak的博客
11-02 5万+
情况一：MongoDB IP配置问题 mongodb的配置文件中的bind_ip 默认为127.0.0.1，默认只有本机可以连接。 此时，需要将bind_ip配置为0.0.0.0，表示接受任何IP的连接 原因：云服务器中安装MongoDB后（默认端口27017），默认绑定IP为 127.0.0.1 ，这就导致外部无法访问； 解决方案： 修改mongod.config配置文件，添加 bind_ip=0.0.0.0 绑定公网IP; 重启mongodb服务 情况二：服务器安全组配置问题 Mongodb的默认端口
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 4228
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
Javascript函数柯里化及其应用场景
Zijeak的博客
09-29 3612
1.什么是柯里化 柯里化，英语：Currying，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。 2.柯里化的用途 参数复用 看下面这个例子： function uri (protocol,hostname,pathname){ return `${protocol}${hostname}${pathname}`; } const uri1 = uri("https://","www.csdn.net","/blo
vue cli中的vue-router详解：四种跳转方式
Zijeak的博客
07-27 3081
文章目录Vue-router1.最基本的跳转2.带参数的基本跳转3.通过query来定义地址栏键值对参数4.通过js跳转 Vue-router 1.最基本的跳转 <router-link to="/demo1">demo1:Hello,world</router-link> 2.带参数的基本跳转 <router-link v-bind:to="{name:'demo1',params:{userId:123}}">跳转到demo1穿参123</router-li
2021秋招前端笔试题部分总结
Zijeak的博客
09-17 1747
1.下面这段程序输出什么？ (function(a){ this.a = a; return b => this.a+b; }(function(a,b){ return a; }(1,2) )) console.log(a,b); 2.keydown和keyCode keydown事件的event.keyCode是什么？ keydown事件在按下键盘上任意键（文本框发生变化之前）被触发，且按住不放会重复触发，当按下的键是数字字母字符键是，它的keyCode属性值与ASCII
HTML5与CSS3学习笔记：网页结构与基础语法
3. **边框与背景**：引入了圆角边框、阴影效果、渐变背景等，提升了网页的视觉效果。 4. **过渡和动画**：`transition`和`animation`属性使得元素在状态改变时能有平滑的过渡效果，增强了用户交互体验。 5. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值