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 ...
随机推荐
- WPF MVVM模式的一些理解
/*本文转自 http://www.cnblogs.com/sirkevin/archive/2012/11/28/2793471.html */ 使用WPF+Mvvm开发一年多,期间由于对Mvvm模 ...
- C#学习笔记-观察者模式
题目1:几个同事为了在上班期间偷偷看休息,做点其他的事情,就和小秘偷偷联系了一下,如果老板回来了,就麻烦小秘偷偷通知一声,这样方便大家及时变更自己的工作状态. 分析: 根据题目分析,首先明确,肯定会有 ...
- ASP.NET MVC @Html.Label的问题
在使用@Html.Lable()来显示Model的某一个字符串属性时,如果该字符串中包含".",那么就会在最终呈现时被截掉开头至"."位置的字符.什么原因尚不清 ...
- h5实现照片墙效果
<style> *{ margin: 0; padding: 0; } body{ background: url(images/bg.jpg); } #div1{ width: 100% ...
- code force 403C.C. Andryusha and Colored Balloons
C. Andryusha and Colored Balloons time limit per test 2 seconds memory limit per test 256 megabytes ...
- AngularJS学习篇（五）
AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope ...
- header操作cookie
root@kl20080094:~# curl -I "http://www.xxx.com" HTTP/1.1 200 OK Server: nginx/0.8.53 Date: ...
- Spring IOC容器分析(1) -- BeanFactory
搭建好源码阅读环境后,就可以慢慢走进Spring殿堂了.IOC是Inversion of Control的缩写,控制反转的意思.很多人可能都知道IOC是spring的核心,将对象的创建初始化等权限交由 ...
- Linux系列教程（十六）——Linux权限管理之ACL权限
通过前面的两篇博客我们介绍了Linux系统的用户管理,Linux用户和用户组管理之相关配置文件 讲解了用户管理的相关配置文件,包括用户信息文件/etc/passwd,用户密码文件/etc/shadow ...
- Linux网络中接收 "二进制" 流的那些事 --- 就recv的返回值和strlen库函数进行对话
1. 前言 很多朋友在做网络编程开发的时候可能都遇到这样的问题,在进行接收二进制流的数据的时候,使用strlen库函数来得到 二进制数据长度的时候并不准确.为什么呢??首先,使用strlen进行 ...