简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel HTML > le corps du texte

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

WBOY
Libérer： 2016-06-24 12:32:21
original
1207 Les gens l'ont consulté

                  <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>
Copier après la connexion

css圆角按钮

 

 

Étiquettes associées：
CSS+DIV实现圆角按钮效果
source：php.cn
Article précédent：CSS+DIV 浮动 空隙问题_html/css_WEB-ITnose Article suivant：CSS+DIV 下拉输入菜单_html/css_WEB-ITnose
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
La bonne façon d'obtenir l'effet de pression sur un bouton en CSS J'utilise CSS pour créer une disposition de piano. J'aime beaucoup cet effet "bouton ...
Depuis 2023-09-09 13:38:06
0
2
259
Les boutons sur mobile restent focalisés ou actifs, provoquant des problèmes avec les animations CSS J'essaie de réaliser une animation à chaque fois que je clique sur un bouton, cela fonctio...
Depuis 2023-08-28 15:14:37
0
1
183
前端 - B站首页的CSS3样式在IE7、8下也起作用，他们用的是什么解决方案？ 最近在做一个页面，考虑低版本浏览器只实现基本的显示，不实现高级的效果。但是今天看了B站，他们的页面在IE7、8中和现代浏览器中完全一样，包括圆角、阴影、css动画都有效。请教他们用...
Depuis 2017-04-17 13:09:17
0
2
293
css - 如何使用 vue transition 实现 ios 按钮一样的平滑切换效果 代码部分 {代码...} {代码...}
Depuis 2017-04-17 11:55:55
0
1
479
ios - 应用启动动画怎么实现 很多游戏的应用启动画面是一个视频，左上角哪里有一个跳过按钮，我想知道这个是怎么实现的？ 另外，这种方法疑似不太好看，我可否像播放GIF那样，把启动的Default.png做成动态图...
Depuis 2017-04-17 11:24:22
0
1
259
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！