css - border-radius
CSS border
2023-09-11 14:14:36 时间
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 body{ 10 text-align: center; 11 } 12 13 h1{ 14 width: 80px; 15 height: 80px; 16 background-color: #000; 17 display: inline-block; 18 19 /* 四周圆角为10px */ 20 border-radius: 10px; 21 /* 上左,下右圆角为10px */ 22 border-radius: 10px 0; 23 /* 上右,下左圆角为10px */ 24 border-radius: 0 10px; 25 /* 四周圆角为10px */ 26 border-radius: 10px 10px 10px; 27 /* 左上角10px圆角、右上角10px圆角、右下角10px圆角、左下角0px圆角 */ 28 border-radius: 10px 10px 10px 0; 29 30 31 32 33 /* CSS多个参数一般依照上、右、下、左来排序... */ 34 35 /* 一般来说,单位都可以用,例如px、em、%.... */ 36 /* 建议为0的参数,不要加单位 */ 37 38 } 39 </style> 40 </head> 41 <body> 42 <h1>0005</h1> 43 </body> 44 </html>
相关文章
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
- 【Cssflex】css中关于弹性布局flex的综合用法(示例展示)
- CSS - 隐藏浏览器自带滚动条(Chrome | Safari | Firefox | IE | Edge)
- 关于css兼容性问题与实践方案
- 前端开发 css、less编写规范
- CSS(字体相关知识以及css三种样式表使用方法)
- 在css中,可以使用white-space属性和word-break属性来设置字符超出宽度就自动换行输出。下面小编举例讲解用DIV+CSS实现字符超出宽度就自动换行输出。
- 【HTML】CSS中的margin、border、padding区别
- 《Web前端开发精品课 HTML与CSS进阶教程》——2.5 表单语义化
- 使用 HTML、CSS 和 JavaScript 的实时计算器
- CSS 伪元素
- 移动端 1px 像素边框问题的解决方案(Border.css)
- 2.CSS
- css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中(文字高度超过图片,图片跟随文字居中,反之文字跟随图片居中非table实现)
- css Table布局:基于display:table的CSS布局
- CSS深入了解border:利用border画三角形等图形
- CSS 雪碧图
- css利用border设置小三角
- CSS魔法堂:重拾Border之——不仅仅是圆角
- CSS学习知识整理(四)Css 盒子模型
- CSS学习知识整理(一)Css 简介、语法与创建
- 玩坏css之border-radius属性