border-radio属性
*{
margin: 0;
padding: 0;
}
.roundedCorner{
width:100px;/*宽*/
height: 100px;/*高*/
border-radius: 10px;/*圆角角度左上，右上，右下，左下都是10px*/
background: deepskyblue;/*背景颜色*/
margin: 20px auto;/*上下间距20px，左右居中*/
}
</style>
</head>
<body>
<div class="roundedCorner"></div>
</body>
效果图：
border-radius的优势不仅仅在制作圆角的边框，还是利用border-radius属性来画圆和半圆。
制作圆的方法：
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.roundedCorner{
width: 100px;/*宽*/
height: 100px;/*高*/
border-radius: 50%;/*圆角角度设置50%，不要设置具体数值，如果哦下面的border值大的话会变形*/
background: deepskyblue;/*背景颜色*/
margin: 20px auto;/*上下间距20px，左右居中*/
border: 5px solid black;
}
</style>
</head>
<body>
<div class="roundedCorner"></div>
</body>
效果图
制作半圆的方法;
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.roundedCorner{
width: 100px;/*宽*/
height: 50px;/*高*/
border-radius: 50px 50px 0 0;/*圆角角度*/
background: deepskyblue;/*背景颜色*/
margin: 20px auto;/*上下间距20px，左右居中*/
}
</style>
</head>
<body>
<div class="roundedCorner"></div>
</body>
效果图
border-radio属性的更多相关文章
- HTML+CSS基础 border css属性 Div块 盒子
border css属性 边框颜色 border-color:red/#ffffff/rgb()默认为黑色 边框样式 border-style:solid (实线) dashed (虚线).默认为n ...
- 利用边框border的属性做小符号
前两天学习中,发现网站上的一个小符号,以为是插入的img,但找来找去也未发现img的地址.最后问了同学,才得知是用border属性做出来的. 符号如右: 其css代码如下: .fuhao { pos ...
- border-width和border其它属性配合实现的小三角形标签效果
如图,附上css代码 { width: 0; border-width: 30px 0px 72px 164px; border-style:solid; border-color:red; bord ...
- border边框属性
边框属性: 边框宽度(border-width):thin.medium.thick.长度值 边框颜色(border-color):颜色.transparent(透明) 边框样式(border-sty ...
- radio属性添加
经常会遇到js控制radio选中和切换的问题 之前一直使用的是checked属性来完成的 但是现在发现这个属性有个大问题 今天就是用js给选中radio的赋值,使用的$().attr("ch ...
- CSS border边框属性教程(color style)
CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...
- 获取input type=radio属性的value值
个人代码1: <div class="form-group" style="width: 250px;margin:0 auto;"> <la ...
- 关于input单选框的radio属性
最近在做前端页面的时候遇到一个问题(后端php猴子前端不怎么写) 我写了一段代码: <form action=""> <label for=&quo ...
- border——边框属性
一.第一层次(复合样式) <style> p.one{border:1px solid black;} /*边框:1像素 实心的 黑色:*/ </style> <body ...
- 用CSS border相关属性画三角形
效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva2l3aV9jb2Rlcg==/font/5a6L5L2T/fontsize/400/fill/I0J ...
随机推荐
- webstorm 卡死解决方法
方法1: 先在外部终端清空node-modules目录,包括隐藏文件,再打开Webstorm,打开Project Structure页面,选中工程,选择node_modules目录(没有的话自己先新建 ...
- Linux入门(2)——Ubuntu16.04安装wineQQ
http://www.ubuntukylin.com/application/show.php?lang=cn&id=279 下载得到wine-qqintl.zip 解压得到wine-qqin ...
- LINUX 笔记-文件名的匹配
特殊的匹配符号: * 匹配文件名中的任何字符串,包括空字符串 ? 匹配文件名中的任何单个字符串 [...] 匹配[]中包含的任何字符 [!...] 匹配[]中非感吧号!之后的字符
- Mysql数据库之auto_increment
一.概述 在数据库应用中,我们经常需要用到自动递增的唯一编号来标识记录.在MySQL中,可通过数据列的auto_increment属性来自动生成.可在建表时可用“auto_increment=n”选项 ...
- Memcached存储命令
Memcached各个存储命令的语法格式都类似,且有相同的参数和参数含义,先将可能出现的各个参数的意义说明如下: key: 键值 key-value 结构中的 key,用于查找缓存值. flag ...
- Jenkins集成taffy进行自动化测试并输出测试报告
本文主要介绍Jenkins集成taffy/nose框架进行自动化测试并输出测试报告方法. 0. 测试环境 Jenkis主节点部署在CentOS系统上,子节点为Win10 64位系统(即我们本机运行自动 ...
- [译]ASP.NET Core 2.0 路由引擎之网址生成
问题 如何在ASP.NET Core 2.0中由路由引擎来生成网址? 答案 新建一个空项目,修改Startup.cs文件,添加MVC服务和中间件: public void ConfigureServi ...
- Mac下如何安装JDK
1.访问Oracle官网 http://www.oracle.com,浏览到首页的底部菜单 ,然后按下图提示操作: 2.点击"JDK DOWNLOAD"按钮: 3.选择" ...
- HTML的语法
1,什么是HTML标记语言,他是表示网页信息的符号标记语言,特点包括: a,可以设置文本的格式,比如标题,文号,文本颜色,段落等待 b,可以简历列表 c,可以插入图像和媒体 d,可以建立表格 e,超连 ...
- glog 使用
glog 使用 来源:http://www.cnblogs.com/tianyajuanke/archive/2013/02/22/2921850.html 一.安装配置 1.简介 google 出的 ...