css按钮圆角,css按钮圆角属性
css3圆角怎么实现?
border-radius:长度
Firefox支持border-radius(圆角):-moz-border-radius:2px;
webkit内核的Safari和Chrome支持border-radius(圆角):-webkit-border-radius:2px;
Opera支持border-radius(圆角):box-shadow:2px;
IE不支持Box Shadow(阴影)
我们还可以随意指定圆角的位置,左上、左下、右上、右下四个方向。在firefox、webkit内核的Safari和Chrome和opera(css3)、中的具体书写格式如下:
#NAME?
#NAME?
#NAME?
#NAME?
《实-站-帮 HTML 培-训. 欢迎你 !》
怎样实现CSS里的圆角方框?
htmlhead
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title网页特效|Linkweb.cn/Js|---圆角表格的实现/title/headbody
div id="nifty"
b class="rtop"b class="r1"/bb class="r2"/b
b class="r3"/bb class="r4"/b/b
h1演示代码/h1 style type="text/css"
body{padding: 20px;background-color: #FFF; br font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#nifty{ margin: 0 10%;background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px; br overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
/style b class="rbottom"b class="r4"/bb class="r3"/b
b class="r2"/bb class="r1"/b/b
/div TABLE style="TABLE-LAYOUT: fixed" height=28 cellSpacing=0 cellPadding=0 width="45%" border=0
TBODY
TR height=3 width="100%"
TD
TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0
TBODY
TR height=1
TD width=1/TD
TD width=1/TD
TD width=1/TD
TD bgColor=#908a47/TD
TD width=1/TD
TD width=1/TD
TD width=1/TD
/TR
TR height=1
TD/TD
TD bgColor=#908a47 colSpan=2/TD
TD bgColor=#f7f8f9/TD
TD bgColor=#908a47 colSpan=2/TD
TD/TD
/TR
TR height=1
TD/TD
TD bgColor=#908a47/TD
TD bgColor=#f7f8f9 colSpan=3/TD
TD bgColor=#908a47/TD
TD/TD
/TR
/TBODY
/TABLE
/TD
/TR
TR
TD
TABLE style="TABLE-LAYOUT: fixed" height="100%" cellSpacing=0 cellPadding=0 border=0
TBODY
TR
TD width=1 bgColor=#908a47/TD
TD id=oINNER bgColor=#f7f8f9 /TD
TD width=1 bgColor=#908a47/TD
/TR
/TBODY
/TABLE
/TD
/TR
TR height=3 width="100%"
TD
TABLE style="TABLE-LAYOUT: fixed" height=3 cellSpacing=0 cellPadding=0 width="100%" border=0
TBODY
TR height=1
TD width=1/TD
TD width=1 bgColor=#908a47/TD
TD width=1 bgColor=#f7f8f9/TD
TD bgColor=#f7f8f9/TD
TD width=1 bgColor=#f7f8f9/TD
TD width=1 bgColor=#908a47/TD
TD width=1/TD
/TR
TR height=1
TD/TD
TD bgColor=#908a47 colSpan=2/TD
TD bgColor=#f7f8f9/TD
TD bgColor=#908a47 colSpan=2/TD
TD/TD
/TR
TR height=1
TD colSpan=3/TD
TD bgColor=#908a47/TD
TD colSpan=3/TD
/TR
/TBODY
/TABLE
/TD
/TR
/TBODY
/TABLE
/body/html

html5中button怎么边框怎么弄成圆角
在HTML中把块的边框做成圆角需要利用css的border-radius属性。
操作步骤:
1、打开Adobe Dreamweaver CC 2015。
2、执行菜单栏中的"文件的新建"命令或按住Ctrl+N键打开"新建文档"对话框,选择其文档类型为HTML,单击"创建"按钮,即创建一个网页文档。
3、在body和/body之间添加"form/form",如下图所示。表单使用的form标记是成对出现的,在首标记form和尾标记/form之间的部分就是一个表单。
4、在form和/form之间添加"input name="text" type="submit" value="登录" class="input_box"",如下图所示。
5、在head和/head之间添加"style type="text/css"/style",如下图所示。
6、在style type="text/css"和/style之间添加".input_box{width:360px; height:40px; border-radius:20px; border-style:none; background:#ec6941;font-size:14px; color:rgba(249,248,248,1.00);}",如下图所示。
7、保存网页文件,按住F12键可以在浏览器中预览效果,如下图所示。
语法说明
输入input是个单标记,必须嵌套在表单标记中使用,用于定义一个用户的输入项。
name属性:输入字段的识别名称,传递数据时的参数名称。
type属性:输入字段的类型。button是表单通用按钮。
value属性:表单字段预设数据值。例如用于button、submit、reset等字段类型指的是按钮标签的显示文字。
class属性:对应于网页中的CSS选择器名称。
CSS 圆角扁平按钮 谁能给我一个? 不带图片CSS写出来的
!doctype?html
html?lang="en"
head
meta?charset="UTF-8"
titleDocument/title
style
.btn{display:inline-block;width:60px;height:?25px;line-height:?25px;text-align:center;color:#fff;border-radius:?5px;text-decoration:?none;
background:-webkit-linear-gradient(270deg,rgb(96,161,255),rgb(33,121,255)?30%,rgb(4,103,255)?30%,rgb(0,97,255))}
.btn:active{background:-webkit-linear-gradient(270deg,rgb(80,121,255),rgb(20,121,255)?30%,rgb(1,103,255)?30%,rgb(0,60,255))}
/style
/head
body
a?href="#"?class="btn"发货/a
/body
/html
大小可以自己改一下
用CSS实现圆角效果
第一种
html xmlns:v
head
style
v\:*{behavior: url(#default#VML);}
/style
/head
body
v:roundRect style="position:absolute;left:20px;top:50px;width:200px;height:140px;" FillColor="#e8e8e8" Filled="T" /
刷新本页才能看到效果
/body
/html
======================================
第二种
css圆角效果,IE6, firefox均显示正常
html
head
titlecss圆角效果--网站每日新/title
meta http-equiv="content-type" content="text/html; charset=gb2312"
style type="text/css"
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
/style
/head
body
div class="RoundedCorner"
b class="rtop"b class="r1"/bb class="r2"/bb class="r3"/bb class="r4"/b/b
br无图片实现圆角框brbr
b class="rbottom"b class="r4"/bb class="r3"/bb class="r2"/bb class="r1"/b/b
/div
/body
/html