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 ...
随机推荐
- FixedUpdate真的是固定的时间间隔执行吗？聊聊游戏定时器
0x00 前言 有时候即便是官方的文档手册也会让人产生误解,比如本文将要讨论的Unity引擎中的FixedUpdate方法. This function is called every fixed f ...
- 使用脚本监控windows服务的方法
以下脚本可监控某一个windows服务,发现其停止就立即重启之. @echo off rem 定义循环间隔时间和监测的服务: set secs=60 set srvname="NetWin ...
- python异步并发模块concurrent.futures入门详解
concurrent.futures是一个非常简单易用的库,主要用来实现多线程和多进程的异步并发. 本文主要对concurrent.futures库相关模块进行详解,并分别提供了详细的示例demo. ...
- require.js实现js模块化编程（一）
1.认识require.js: 官方文档:http://requirejs.org/RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的Requ ...
- c#public、private、protected、internal、protected internal修饰符及访问权限
c#public.private.protected.internal.protected internal修饰符及访问权限 public 公有访问.不受任何限制. private 私有访问.只限于本 ...
- C#中的异常处理（try-catch的使用）——使程序更加稳定
使用try-catch来对代码中容易出现异常的语句进行异常捕获. try { 可能出现异常的代码: } catch { 出现异常后需要执行的代码: } 注:1.在执行过程中,如果try中的代码没有出现 ...
- Zernike不变矩
1.Zernike矩介绍 Zernike矩是基于 Zernike多项式的正交化函数,所利用的正交多项式集是 1个在单位圆内的完备正交集.Zernike矩是复数矩 ,一般把 Zernike矩的模作为特征 ...
- input框内的单引号，双引号转译
主要是在后台传前端之前先把变量值替换单引号双引号成转译付. $bianlian是要替换的变量 两种方法 1.php后台输出值先转译 //双引号替换成转译符 $bianlian=preg_replace ...
- Python-week1，第一周（基于Python3.0以上）
1,变量 准确来说不是第一周学习了吧,应该是采用博客记录学习的第一周,记录并做个笔记吧,可能做的不好,但我高兴啊,废话不说了,上图. 学习过程中做的一些笔记,当然能面面俱到,只能在写博客的时候又能复习 ...
- 设备类型检测大全---userAgent
对各种类型的设备的检测,以及所使用的浏览器的类型 function detect(ua) { var os = this.os = {}; var browser = this.browser = { ...