`

CSS制作圆角图片效果

美工 圆角图片 CSS 圆角效果 图片圆角 
阅读更多

        网页设计的大多数地方都会用到圆角效果，如导航条，如按钮等，实际上使用CSS就可以制作出简单的圆角效果，可以试一试我下面的方法~~


源代码(直接使用就好了)：



<html>
    <head>
        <style>
        span {

    /*  这里也可以换成图片 */
    background-color:#3f769f;
    border-color: #4D8FB3 #4D8FB3 -moz-use-text-color;
    border-style: solid solid none;
    border-width: 1px 1px medium;
    color: #FFFFFF;
    width:100px;
    height:30px;
    font:bold 12px 微软雅黑;
    text-decoration: none;
    /* 圆角效果 Start */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;

    /* 圆角效果 End */
    text-align:center;
    padding:5px 10px 5px 10px;
        }   
        </style>
    <head>
    <body>
            <center>
                  <span>hello world!</span>
            </center>
  </body>
<html>

 

 

效果图过目：

 

圆角效果看起来还不错吧~~~ Hope it useful for You!

  • 大小: 2.2 KB
0
顶
3
踩
分享到：
| 部分浏览器(如chorme)缓存js的问题解决
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    超简单！使用CSS制作圆角表格 3步搞定

    其中，制作圆角表格是一项常见的需求，尤其在追求现代感与用户友好体验的设计中。本文将详细介绍如何通过简单的三步骤，利用CSS来实现圆角表格的制作。 ### 第一步：设置基本CSS样式 首先，我们需要定义一些基本的...

    CSS Sprites 圆角制作教程

    1. **创建Sprite**：使用编辑器（如Fireworks）创建并切割圆角图片，然后将四个角合并成一张图片，用1px的线条分隔。 2. **HTML代码**：创建一个主容器`&lt;div class="roundedBox"&gt;`，并在其中添加四个具有不同类名的...

    html5+css3圆角图文展示卡片层叠滑动切换特效.zip

    此外，层叠效果可能涉及到CSS3的过渡（transition）和动画（animation）属性，使得卡片在切换时有平滑的过渡效果。CSS3还支持媒体查询（media queries），这使得特效可以根据设备的屏幕尺寸进行响应式布局，适应手机...

    CSS圆角制作器 v1.0

    总结，CSS圆角制作器 v1.0 是一款实用的在线工具，它帮助开发者和设计师轻松创建美观且兼容性的CSS圆角效果。在现代Web设计中，理解并掌握CSS3的圆角边框不仅能够提升页面的视觉吸引力，也是优化用户体验的重要一环...

    CSS实现的圆角化图片.pdf

    4. 不需要制作圆角图片，节约网络流量，并且也可以减少或降低设计人员的工作量，减少前端人员布局定位的兼容性工作。 圆角化图片的缺点 1. 语义化不够好，因为其圆角全部由 HTML 结构标签堆砌而成，而这些标签在...

    用css做的一个简单的圆角图片相册

    本示例将详细介绍如何使用CSS（层叠样式表）技术制作一个简单的圆角图片相册。圆角图片相册不仅提升了视觉效果，还能为用户提供更舒适的浏览体验。CSS的圆角属性允许我们无需借助图像编辑软件就能实现图片边角的圆滑...

    圆角图片Demo

    在设计阶段，也可以使用图像处理软件（如Photoshop、GIMP等）预先制作好圆角图片，然后将其导出为PNG或JPEG格式。这种方法适用于固定圆角且不需动态改变的情况。 6. 图片占位符服务： 对于开发和预览阶段，一些...

    圆角图片、按钮制作利器

    本教程将深入探讨如何制作圆角图片和按钮，并提供一种强大的工具来帮助你实现这一目标。 首先，我们来了解一下什么是圆角图片。传统的矩形图片边缘锐利，而圆角图片则是通过在图片的四个角应用圆弧过渡效果，使其...

    CSS3制作圆角图片和椭圆形图片

    在CSS3中，`border-radius`属性支持不同类型的值，如像素值、百分比值等，开发者可以根据设计需求选择合适的值来制作圆角图片。 椭圆形图片的制作同样是依赖于`border-radius`属性。通过将此属性值设置为50%，即可...

    css3教程应用css3 圆角border-radius属性制作...

    在CSS3中，`border-radius`属性是一个非常重要的特性，它允许我们为元素的边框创建圆角效果，使得设计更加美观和现代化。这个特性在网页设计中被广泛应用，可以替代传统的图片切角方法，提高网页加载速度并优化用户...

    CSS3圆角边框.docx

    - **减少维护工作**：CSS3圆角不再需要制作和管理多张图片作为背景，简化了网页开发流程。 - **提高网页性能**：由于不依赖额外的HTTP请求加载图片，页面加载速度得以提升。 - **视觉可靠性**：背景图片可能出现...

    CSS3圆角菜单特效集.rar

    首先，**CSS3圆角** 是一个非常重要的特性，它允许我们无需借助图片就能创建出带有圆角的元素。通过`border-radius`属性，我们可以轻松地设置元素四个角落的半径，实现各种圆润的边缘效果。例如，`border-radius: 10...

    css+js圆角 分享啦

    例如，一个常见的做法是使用DOM操作创建背景图片，这些图片是预先制作好的带有圆角的图片，然后根据元素的实际大小调整它们的位置。 JavaScript库可能包含以下功能： 1. 检测浏览器是否支持CSS3 `border-radius`，...

    CSS3+HTML5实现圆角【WEB前端】

    CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，而且还有其他多个优点： * 减少维护的工作量。图片文件的生成、更新、编写网页代码，这些工作都不再需要了。 * 提高网页性能。由于不必再发出多余的HTTP...

    圆角的实现方式，CSS+JS

    本主题将深入探讨如何使用CSS和JavaScript来实现各种圆角效果，包括应用于DIV、背景色、图片等方面。 首先，我们从CSS的角度出发。CSS3引入了`border-radius`属性，这是实现圆角最直接和广泛支持的方式。`border-...

    PHP实例开发源码-CSS圆角制作器 php版.zip

    然而，在早期的HTML和CSS版本中，实现圆角效果并不简单，通常需要使用图片或者JavaScript。随着CSS3的出现，圆角可以通过CSS直接设置，大大简化了开发过程。而PHP作为一种服务器端脚本语言，可以结合前端技术，为...

    WEB2.0 圆角图片设计

    本文将详细介绍如何在不依赖专业图片处理软件的情况下，轻松创建和批量制作WEB2.0风格的圆角图片。 首先，我们要理解圆角图片设计的基本原理。在CSS（层叠样式表）中，通过设置`border-radius`属性，我们可以实现...

    CSS3圆角边框和边界图片效果实例

    CSS3圆角边框和边界图片效果实例这篇文档主要讲解了CSS3中的圆角边框效果、盒阴影效果以及如何通过图片制作边框的技巧。这些知识点在现代网页设计中非常实用，能够让网页的边框设计更加丰富和有创意。下面是对这些...

    CSS3通过样式定义制作的50个圆角渐变效果的网页按钮.zip

    本资源“CSS3通过样式定义制作的50个圆角渐变效果的网页按钮.zip”正是一个专注于利用CSS3特性的实践案例集，包含了50个具有不同圆角渐变效果的网页按钮。这些按钮的设计不仅能够吸引用户的注意力，还能以优雅的方式...

    div+css制作圆角矩形的原理示例解读

    在网页设计中，使用div+CSS来创建圆角矩形是一种常见的方法，它利用了CSS的边框和背景属性来模拟圆角效果。在没有CSS3之前，由于浏览器的兼容性问题，这种方法尤为流行。本篇文章将深入解析如何通过div+CSS实现圆角...

Magicbox
Global site tag (gtag.js) - Google Analytics