简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Heim > Web-Frontend > HTML-Tutorial > Hauptteil

CSS+DIV实现圆角按钮效果_html/css_WEB-ITnose

WBOY
Freigeben： 2016-06-24 12:32:21
Original
1207 Leute haben es durchsucht

                  <p class="sycode">                      <     html     >          <     head     >          <     title     >     纯css实现圆角按钮     </     title     >          <     style      type     ="text/css"     >     .a     {     float     :     left     ;      border-width     :     1px 0     ;      border-color     :     #bbbbbb     ;      border-style     :     solid     ;     }     .b     {     height     :     22px     ;      border-width     :     0 1px     ;      border-color     :     #bbbbbb     ;      border-style     :     solid     ;      margin     :     0 -1px     ;      background     :     #e3e3e3     ;      position     :     relative     ;      float     :     left     ;     }     .c     {     line-height     :     10px     ;      color     :     #f9f9f9     ;      background     :     #f9f9f9     ;      border-bottom     :     2px solid #eeeeee     ;     }     .d     {     padding     :     0 8px     ;      line-height     :     22px     ;      font-size     :     12px     ;      color     :     #000000     ;      clear     :     both     ;      margin-top     :     -12px     ;      cursor     :     pointer     ;     }          </     style     >          </     head     >          <     body     >          <     div      class     ="a"     >          <     div      class     ="b"     >           <     div      class     ="c"     >           </     div     >           <     div      class     ="d"     >     css圆角按钮     </     div     >          </     div     >          </     div     >          </     body     >          </     html     >                  </p>
Nach dem Login kopieren

css圆角按钮

 

 

Verwandte Etiketten：
CSS+DIV实现圆角按钮效果
Quelle：php.cn
Vorheriger Artikel：CSS+DIV 浮动 空隙问题_html/css_WEB-ITnose Nächster Artikel：CSS+DIV 下拉输入菜单_html/css_WEB-ITnose
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Der richtige Weg, um den Tastendruckeffekt in CSS zu erzielen Ich verwende CSS, um ein Klavierlayout zu erstellen. Ich mag diesen „Knopf gedrückt“-Effek...
Aus 2023-09-09 13:38:06
0
2
259
Schaltflächen auf Mobilgeräten bleiben fokussiert oder aktiv, was zu Problemen mit CSS-Animationen führt Ich versuche, jedes Mal, wenn ich auf eine Schaltfläche klicke, eine Animation zu erzielen...
Aus 2023-08-28 15:14:37
0
1
183
前端 - B站首页的CSS3样式在IE7、8下也起作用，他们用的是什么解决方案？ 最近在做一个页面，考虑低版本浏览器只实现基本的显示，不实现高级的效果。但是今天看了B站，他们的页面在IE7、8中和现代浏览器中完全一样，包括圆角、阴影、css动画都有效。请教他们用...
Aus 2017-04-17 13:09:17
0
2
293
css - 如何使用 vue transition 实现 ios 按钮一样的平滑切换效果 代码部分 {代码...} {代码...}
Aus 2017-04-17 11:55:55
0
1
479
ios - 应用启动动画怎么实现 很多游戏的应用启动画面是一个视频，左上角哪里有一个跳过按钮，我想知道这个是怎么实现的？ 另外，这种方法疑似不太好看，我可否像播放GIF那样，把启动的Default.png做成动态图...
Aus 2017-04-17 11:24:22
0
1
259
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！