DIV设置圆角样式属性

原始JS版本

<!DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #a1a1a1;/* 边框样式*/
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px; /*调节圆周程度*/
-moz-border-radius:25px; /* 老的 Firefox */
}
</style>
</head>
<body><div>border-radius 圆角属性就是这么简单</div></body>
</html>

JQ版本

$("#DIV的ID号").css("border-radius","9px");

注意，这是jquery的代码。其中，border-radius是圆角属性，四条边都是圆角。9px是圆角的弧度。

如果不使用上面的代码，可以直接使用CSS3的来实现，看下面的样式表代码：

#rcorners1 {

border-radius: 25px;

background: #8AC007;

padding: 20px;

width: 200px;

height: 150px;

}

圆角

知识拓展：

使用 CSS3 border-radius 属性，你可以给任何元素制作 "圆角"。

CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。

三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角

两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角

一个值：四个圆角值相同

属性　　　　　　　　　　　　　　　描述

border-radius 所有四个边角 border-*-*-radius 属性的缩写

border-top-left-radius 定义了左上角的弧度

border-top-right-radius 定义了右上角的弧度

border-bottom-right-radius 定义了右下角的弧度

border-bottom-left-radius 定义了左下角的弧度

DIV设置圆角样式属性相关推荐

【响应式Web前端设计】css如何设置边框的圆角样式？border-radius属性设置圆角样式（图文）
border-radius包含5种设置圆角样式方式: border-radius :同时设置4个边框的圆角样式. border-top-left-radius :设置左上角边框的圆角样式. borde ...
Css中设置列表项目符号属性,CSS如何设置列表样式属性，分享
列表样式属性在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
WPF Button 设置圆角 CornerRadius属性的使用
在WPF,button的默认形态时长方形的,但是我们为了美观,通常需要将button的四个角设计的温和一点,在WPF中就需要用到这样一个属性CornerRadius. 首先我们要画一个button & ...
div css 圆角样式
代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...
初次使用CardView设置圆角等属性出现的问题（设置圆角出现层叠，外层View多出角的问题）
今天心血来潮想做个比较好看的UI,在使用CardView设置圆角时出现下图的问题: 四个角很丑有没有,出现的原因是我在自定义View的根布局上使用了app:cardCornerRadius这个属性,却 ...
thymeleaf 修改css,用thymeleaf设置CSS样式属性
-1 I hope it will help someone. 我希望它会帮助某人. Please make sure that your image SIZE is SMALLER than scr ...
html设置input圆角矩形_css怎么实现按钮圆角样式的展示效果?（示例）
在网页设计过程中,一般标签属性默认的效果都不是太美观,就比如按钮样式,默认状态是极其普通毫无美感.那么本篇文章就给大家介绍关于css设置按钮样式之圆角按钮效果的相关操作示例. 代码如下: 或者效果如 ...
怎样设置html的元素属性,Jquery怎么设置元素的属性和样式？
Jquery怎么设置元素的属性和样式?下面本篇文章给大家介绍一下使用jQuery操作元素属性与样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 元素属性和Dom属性对于下 ...
jquery设置css样式、style属性示例（超强解析）
jQuery 一.CSS 1.css(name) 2.css(properties) 3.css(name,value) 二.位置 1.offset() 2.position() 3.scrollTo ...

DIV设置圆角样式属性

DIV设置圆角样式属性相关推荐

最新文章

热门文章