[转]利用css3打造无图片圆角输入框

最新推荐文章于 2023-05-24 09:27:47 发布

PandaraWen

最新推荐文章于 2023-05-24 09:27:47 发布

阅读量417

点赞数

分类专栏： css笔记

本文链接：https://blog.csdn.net/pandarawen/article/details/8149917

版权

css笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

原文： http://www.freeislife.com/css-input-radius/

还在为如何实现无图片的圆角输入框而烦恼吗，其实用css3新添加的radius属性就能轻松结局这个问题。其中-webkit-border-radius: 5px; 是chrome和safari的专有属性，-moz-border-radius: 5px;是firefoe的专有属性，当然，万恶的IE6是不支持这个属性的。
代码如下：

 
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
   

 
     < 
    html 
     xmlns 
    = 
    "http://www.w3.org/1999/xhtml" 
    > 
   

 
     < 
    meta 
     http-equiv 
    = 
    "Content-Type" 
     content 
    = 
    "text/html; charset=utf-8" 
     /> 
   

 
     < 
    title 
    >圆角输入框</ 
    title 
    > 
   

 
     < 
    style 
    > 
   

 
     input { 
   

 
    background: #fff; border: 1px solid #000;

 
    padding: 5px;

 
    border-radius: 5px;

 
    -webkit-border-radius: 5px;

 
    -moz-border-radius: 5px;

}

 
     </ 
    style 
    > 
   

 
     </ 
    head 
    > 
   

 
     < 
    input 
     class 
    = 
    "inout" 
     name 
    = 
    "inout" 
     type 
    = 
    "text" 
     value 
    = 
    "" 
    > 
   

 
     </ 
    body 
    > 
   

 
     </ 
    html 
    > 
   

PandaraWen

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[转]利用css3打造无图片圆角输入框

原文：http://www.freeislife.com/css-input-radius/还在为如何实现无图片的圆角输入框而烦恼吗，其实用css3新添加的radius属性就能轻松结局这个问题。其中-webkit-border-radius:5px; 是chrome和safari的专有属性，-moz-border-radius:5px;是firefoe的专有属性，当然，万恶的IE6是不支持这
复制链接

扫一扫

专栏目录