专注WEB开发 分享经验,沉淀知识

css如何做底部翘边?

 作者:chenxing  时间:2018-01-30 18:50  阅读:75  评论:

css3能够轻松的把页面做的美观点,有时候往往只添加一行代码就能使页面变的可观赏性。

先看一张input底部边框翘边效果图:

input翘边效果图

如何实现上面的翘边呢?一行css代码轻松搞定。

/**真正翘边效果border-radius,值的大小可以决定翘边的明显度。
下面的单位值为参考值可以根据具体的项目取值**/
input{
    font-family: "微软雅黑";
    outline: none;
    border: none;
    font-size: 1rem;
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    border-radius: 1rem;
    text-indent: 10px;
    line-height: 3rem;
}

css3能够轻松的把页面做的美观点,有时候往往只添加一行代码就能使页面变的可观赏性。就行上图,加一个翘边和不加翘边给人的感觉就很不一样,而代码的差距仅仅只是一行代码。

除特别注明外,本网站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 https://www.qiusuoweb.com/122.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

一年时间又回到这里

 2019-07-27 16:54  119

PHP字符串转数组的三种场景

 2018-05-05 01:32  191

PHP如何遍历字符串?

 2018-05-04 00:56  1072

api接口常见的安全问题和解决方案

 2018-05-03 23:20  880

 最新评论

 心态炸裂: 03月24日 10:54
No3.blindcomfirm 多了一个l,望改正!!!
来源: 微信小程序获取input值的总结
 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里
 花花草草: 10月14日 14:58
tp5不是已经提前开了吗
来源: _SESSION变量未定义?
 疯了: 10月10日 13:40
你好呀,我使用docker构建的 把整个项目给了777 并把runtime的所有者给了nginx php的运行者还是报错
来源: thinkphp5的mkdir() Permission denied问题探讨
 mesecretme: 09月30日 15:30
有个问题,有没有发现用redis保存session的话,session清空redis的key还没过期,会依然保留的,这是值变成空了
来源: php项目redis实现session共享案例
 旧久: 09月20日 07:24
感谢!
来源: 没备案域名如何在阿里云服务器上使用?