CSS新手入门笔记整理:CSS边框样式

news2025/1/20 12:14:33

边框宽度:boder-width

语法

boder-width:像素值;

边框样式:boder-style

语法

boder-style:取值;

属性值

说明

none

无样式

dashed

虚线

solid

实线


边框颜色:boder-color

语法

boder-color:色值;

简写形式

语法

边框:宽度值 样式值 颜色值

boder:1px solid red;

局部样式

  • 上边框:border-top
  • 左边框:border-left
  • 右边框:border-right
  • 下边框:border-bottom


边框圆角: border-radius

语法

元素{border-radius:取值;}

border-radius 属性取值是一个长度值,单位可以是 px、em 和百分比等。

border-radius的四个取值

/*设置 1 个值,表示 4 个角的圆角半径都是 10px*/
border-radius:10px;
/*设置 2 个值,表示左上角和右下角的圆角半径都是 10px,右上角和左下角的圆角半径都是 20px。*/
border-radius:10px 20px
/*设置 3 个值,表示左上角的圆角半径是 10px,左下角和右上角的圆角半径都是 20px,右下角的是30px*/
border-radius:10px 20px 30px;
/*设置 4 个值,表示左上角、右上角、右下角和左下角的圆角半径依次是 10px、20px、30px、40px*/
border-radius:10px 20px 30px 40px;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1280235.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

MFC 绘制单一颜色圆形、渐变颜色边框圆形、渐变填充圆形以及绘制三角函数正弦函数曲线.

MFC 绘制三种不同圆形以及绘制正弦函数曲线 本文使用visual Studio MFC 平台实现绘制单一颜色圆形、渐变颜色边框圆形、渐变填充圆形以及绘制三角函数正弦函数曲线. 关于基础工程的创建请参考 01-Visual Studio 使用MFC 单文档工程绘制单一颜色直线和绘制渐变颜色的直线 02-vis…

Hisat-Trinity-PASA等组学分析流程

一边学习,一边总结,一边分享! 详细教程请访问: 组学分析流程 本期分析流程 Hisat2-SamtoolsTrinity_GG_denovoPASA … 本期教程文章 题目:Genomic insights into local adaptation and future climate-induced vu…

全面的.NET微信网页开发之JS-SDK使用步骤、配置信息和接口请求签名生成详解

JSSDK使用步骤 步骤一:绑定安全域名: 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 步骤二:引入JS文件: 在需要调用JS接口的页面引入如下JS文件,(支持https):http://…

分治—快速选择算法

文章目录 🍇215.数组中的第K个最大元素🍈1. 题目🍉2. 算法原理🍊3. 代码实现 🍋LCR 159. 库存管理 III🍌1. 题目🍍2. 算法原理🥭代码实现 🍇215.数组中的第K个最大元素 …

〖大前端 - 基础入门三大核心之JS篇㊺〗- 定时器和延时器

说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费,如需要项目实战或者是体系化资源,文末名片加V!作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…

MathType公式编辑器安装教程

一、下载 MathType7是一款可以帮助用户快速完成数学公式编辑的应用软件,这款软件适合在进行教育教学、科研机构、论文写作的时候使用。我们可以直接通过这款软件来获取到大量数学上使用到的函数、数学符号等内容,然后使用这些内容来完成公式编辑。 …

ROS第一个程序——helloworld

目录 一、工作空间的创建 1.创建工作空间并初始化 2.进入 src 创建 ros 包并添加依赖 二、C实现helloworld C源码实现 编辑 ros 包下的 Cmakelist.txt文件 进入工作空间目录并编译 执行 三、python实现helloworld 进入 ros 包添加 scripts 目录并编辑 python 文件 …

【设计模式-4.1】行为型——观察者模式

说明:本文介绍设计模式中行为型设计模式中的,观察者模式; 商家与顾客 观察者模式属于行为型设计模式,关注对象的行为。以商家与顾客为例,商家有商品,顾客来购买商品,如果商家商品卖完了&#…

【Leetcode题单】(01 数组篇)刷题关键点总结02【统计数组中的元素】

【Leetcode题单】(01 数组篇)刷题关键点总结02【统计数组中的元素】(6题) 统计数组中的元素645. 错误的集合 Easy697. 数组的度 Easy448. 找到所有数组中消失的数字 Easy442. 数组中重复的数据 Medium41. 缺失的第一个正数 Hard27…

【问题解决】Linux内核编译安装后磁盘空间已满问题

Linux内核编译安装后磁盘空间已满问题解决过程 【注】本文为个人遇到Linux内核经过make,make modules……乃至最后install以后VMware磁盘空间爆炸的情况后,而又不想重装虚拟机,自己找资料实现解决的,文章中很多链接是来自别的博主…

python动态圣诞下雪图

运行图片 代码 import pygame import random# 初始化Pygame pygame.init()# 创建窗口 width, height 800, 600 screen pygame.display.set_mode((width, height)) pygame.display.set_caption(Christmas Tree)# 定义颜色 GREEN (34, 139, 34) RED (255, 0, 0) WHITE (255…

GAMES101:作业2记录

总览 在上次作业中,虽然我们在屏幕上画出一个线框三角形,但这看起来并不是那么的有趣。所以这一次我们继续推进一步——在屏幕上画出一个实心三角形,换言之,栅格化一个三角形。上一次作业中,在视口变化之后&#xff0…

Redis--13--缓存一致性问题

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 缓存一致性问题1、先更新缓存,再更新DB方案二:先更新DB,再更新缓存方案三:先删缓存,再写数据库推荐1&…

Python ctypes:揭秘高级Python与底层交互秘籍

更多资料获取 📚 个人网站:ipengtao.com ctypes是Python标准库中的外部函数库,允许Python调用动态链接库中的函数。它提供了与C兼容的数据类型和允许Python调用共享库中的函数,对系统级编程和与硬件交互非常有用。 基本用法 加…

基于Django框架搭建的协同过滤算法电影推荐网站-爬取的豆瓣电影数据

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介概述技术栈实现流程 二、功能三、系统四. 总结 一项目简介 # 电影推荐网站介绍 概述 该电影推荐网站是基于Django框架搭建的,旨在为用户提供个…

jdk1.8 hashmap源码阅读

目录 hashmap 成员变量 hashmap支持null键吗?为什么? 当扩容的时候,所有元素都会重新计算hash值吗? 怎么减少扩容次数 为什么node数组的大小是2的n次? 1.8和1.7的区别 1.8为啥要用红黑树? 扩容机制…

12.3_黑马MybatisPlus笔记(上)

目录 02 03 04 05 06 07 ​编辑 thinking:system.out::println?​编辑 thinking:list.of? 08 thinking:RequestParam和 ApiParam注解使用? thinking:RequestParam 和PathVariable的区别? ​编辑 ​编…

“B2B+OMS方案”,赋能家电巨头构建BC订单一体化能力,促进业务增长|徐礼昭

某国际知名家电电器品牌,年营收超过5000亿元。该电器企业其整体业务分三大类:线上线下B2B2C业务、线下B2B业务以及DTC零售业务。 随着业务的发展,该电器品牌对2B业务及DTC业务的数字化系统能力支撑需要更加全面和立体,以适应业务…

Sharding-Jdbc(4):Sharding-Jdbc分库

1 新建数据库 创建ds_0数据库和ds_1数据库,在两个数据库新建表如下: CREATE TABLE t_order (order_id bigint(20) NOT NULL,user_id bigint(20) NOT NULL,PRIMARY KEY (order_id) ) ENGINEInnoDB DEFAULT CHARSETutf8 COLLATEutf8_bin; 2 新建maven项目…

基于姿态估计的3D动画生成

在本文中,我们将尝试通过跟踪 2D 视频中的动作来渲染人物的 3D 动画。 在 3D 图形中制作人物动画需要大量的运动跟踪器来跟踪人物的动作,并且还需要时间手动制作每个肢体的动画。 我们的目标是提供一种节省时间的方法来完成同样的任务。 我们对这个问题…