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 ...
随机推荐
- OpenWRT 添加应用程序开机启动方法
方法一:在/etc/inid.d/目录下新建启动脚本. 方法二:直接在/etc/rc.local 中添加启动命令,如:./usr/bin/relay &
- Git 工作流的正确打开方式
前言 一直在使用git做版本控制,也一直工作很顺利,直到和别人发生冲突的时候.这才注意到git 工作流并不是那么简单.比如,之前遇到的清理历史.百度到的资料很多,重复性也很多,但实践性操作很少,我很难 ...
- javaWeb 基础知识
cookie 深度解析: http://blog.csdn.net/ghsau/article/details/20395681 cookie 的作用: 利用存在客户端本地的缓存让无状态的服务器也 ...
- 我的第一个python web开发框架（12）——工具函数包说明（三）
mail_helper.py是邮件操作包,用来发送邮件的. #!/usr/bin/evn python # coding=utf-8 import smtplib from email.mime.te ...
- LINUX 笔记-重定向 :<,<<,>,>>
command>filename 把标准输出重定向到一个新文件中 command>>filename 把标准输出重定向到一个文件中(追加) command 1>filena ...
- Servlet 笔记-servlet实例
Servlet 是服务 HTTP 请求并实现 javax.servlet.Servlet 接口的 Java 类.Web 应用程序开发人员通常编写 Servlet 来扩展 javax.servlet.h ...
- 前端页面中如何在窗口缩放时让两个div始终在同一行显示
直接贴代码吧 先总结一下吧 有两种方法 一 最外层设置一个大div 给这个大div固定的宽度和高度 给里面两个小div 设置浮动 设置宽高 <!DOCTYPE html> &l ...
- 【Win 10 应用开发】UI Composition 札记（一）：视图框架的实现
在开始今天的内容之前,老周先说一个问题,这个问题记得以前有人提过的. 设置 Windows.ApplicationModel.Core.CoreApplicationView.TitleBar.Ext ...
- 读书笔记-你不知道的JS上-this
关于this 与静态词法作用域不用,this的指向动态绑定,在函数执行期间才能确定.感觉有点像C++的多态? var a = 1; var obj = { a: 2, fn: function() { ...
- 紧跟腾讯大王卡：B站2233卡“基友号”即将上线
来自B站官方的消息显示,B站在近期也将推出"基友号"功能,功能的内容是通话免费,考虑到这类互联网套餐都是中国联通在运营,因此在内容上可能也会效仿腾讯大王卡实现免费通话. 目前,B站 ...