`
wangcheng
  • 浏览: 1466714 次
  • 性别: Icon_minigender_1
  • 来自: 青岛人在北京
社区版块
存档分类
最新评论

Google的圆角效果(转)

    博客分类：
  • ajax
GoogleCSSUICC++ 
阅读更多

在以往的一些情况下，圆角是大家比较喜欢也经常使用的一个UI涉及元素，我们以往的办法是用背景图片或者使用CSS把一些线条叠加起来，多少有些不爽，今天无意发现Google中有个圆角的方法，可以使用，如下：

google生成的圆角

代码 (生成图片的URL) 如下
http://google.com/groups/roundedcorners?c=dd00dd&bc=white&w=40&h=40&a=tr

其中:
1.c表示圆角图片的颜色；
2.bc表示圆角图片的背景颜色；
3.w和h分别表示圆角图片的宽和高；
4.a表示圆角产生的方向，tl是左上角，tr是右上角，bl是左下角，br是右下角。
可以按照自己的爱好定制，比较灵活。

原文: http://www.1sters.com/blog/view/23

分享到：
| 项目部署问题总结
评论
发表评论

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

相关推荐

    实现TextView圆角效果

    在Android开发中，为UI元素添加圆角效果是常见的需求，尤其在设计现代、美观的应用时。本篇文章将深入探讨如何实现TextView的圆角效果，同时结合提供的CSDN_TextView_Demo示例进行详细解释。 首先，让我们了解...

    CardView轻松实现圆角卡片效果

    在Android开发中，CardView是一个非常实用的组件，它提供了美观的卡片视图效果，可以轻松地创建具有圆角、阴影以及背景色的UI元素。本文将深入探讨如何使用CardView来实现圆角卡片效果，并结合示例代码帮助开发者更...

    Android强制控件圆角实现

    在Android开发中，为UI控件添加圆角效果是一种常见的需求，可以提升应用的视觉美感。本文将深入探讨如何在Android中实现强制控件显示为圆角，特别关注"Android圆角Tag控件的另类实现"。我们将不依赖于自定义View，...

    c# 自定义TextBox 模糊匹配 百度 谷歌搜索框效果

    为了实现圆角效果，我们需要重绘TextBox。在控件类中，我们覆盖OnPaint方法，使用Graphics对象和Pen来绘制带有圆角的矩形。首先，定义控件的圆角半径，然后在OnPaint中绘制： ```csharp protected override void ...

    android listview 圆角的实现方案，模仿Iphone的UITableView

    3. **使用CardView组件**：Google推出的CardView可以方便地实现圆角效果。将ListView的每个列表项包裹在CardView内，设置CardView的radius属性即可。这种方式更适用于Material Design风格的应用。 4. **自定义...

    CSS3圆角代码

    CSS3圆角代码 基于jQuery+CSS的圆角框效果，演示一下如何使用jQuery并配合CSS代码实现漂亮的圆角框效果。 提示：本圆角效果在IE下显示有问题，在Opera及火狐及Google浏览器下都没有问题。

    圆角图片，圆形图片，椭圆图片

    在Android开发中，有时我们需要对显示的图片进行样式处理，比如让图片呈现圆角、圆形或者椭圆形的效果，这样不仅可以提升界面的美观性，还能在特定场景下增加用户体验。本篇将详细介绍如何在Android中实现这些效果，...

    android 圆角图片实现

    `GlideRoundTransform`是一个自定义的转换器，你可以根据需要重写它的`transform()`方法来实现圆角效果。 此外，还有一些第三方库，如`CircleImageView`，它们专门用于显示圆形或圆角图片，使用起来也非常方便。只...

    纯CSS3实现圆角效果（含IE兼容解决方法）

    在CSS3中用来生成圆角效果的属性是border-radius.这个属性跟大家熟知的width等属性的用法相似： 复制代码代码如下:.roundElement { border-radius: 10px;}上面的这句代码的作用是设置一个元素的四个角的弧度半径值都...

    圆角化窗口.e.rar

    标题中的“圆角化窗口.e.rar”提示我们这个压缩包可能包含有关于创建或实现具有圆角效果的窗口界面的资源或教程。描述和标签同样重申了这一主题，但没有提供更多的具体信息。不过，我们可以从这个主题出发，探讨在IT...

    超级好用的jQuery圆角插件 Corner速成

    这个插件允许开发者轻松实现元素的圆角效果，通过在目标元素周围添加带有背景颜色的小条块来模拟圆角，从而达到视觉上的圆润效果。虽然这种方法在技术层面上并不复杂，但它巧妙地利用了CSS和JavaScript，使得在早期...

    CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)

    -webkit-border-radius：苹果；...border-radius：用这个属性能实现圆角边框的效果。 现在只有Mozilla/Firefox 和 Safari 3支持该属性。请看下面的示例代码： 复制代码代码如下: <div style=”bac

    纯css3谷歌Google样式的按钮

    1. **边框半径（border-radius）**：用于创建圆角效果，使得按钮看起来更加柔和，符合谷歌简洁的设计理念。 2. **阴影效果（box-shadow）**：通过添加阴影，按钮可以获得立体感，同时也可以增加视觉层次。 3. **...

    个性圆角CSS模板_个性 圆角 jquery 简单_html网站模板_网页源码移动端前端_H5模板_自适应响应式源码.rar

    这不仅提升了用户的浏览体验，也符合Google的移动优先索引策略，有利于搜索引擎优化。 最后，压缩包中的文件名称列表提示了模板的主要组成部分。"个性圆角CSS模板"表明模板的核心在于CSS样式，特别是圆角设计；...

    beyole_android_SettingMenus:Android圆角设置页面

    在Android开发中，创建具有圆角效果的设置页面可以提升应用的用户体验和视觉美观度。`beyole_android_SettingMenus`项目就是这样一个实例，它展示了如何在Android中实现一个带有圆角界面的设置菜单。这个项目的核心...

    圆角简单绿色向阳花博客模板-绿色 圆角 企业 英文 简单 html 博客.rar

    此外，还可以通过集成第三方服务，如Google Analytics来追踪网站流量，或者使用评论系统来促进用户参与。 总的来说，“圆角简单绿色向阳花博客模板”提供了一个高效、美观且可定制的起点，无论是个人博主还是企业，...

    超强JavaScript效果[超强JavaScript效果]

    17. **圆角效果**：在不支持CSS3的浏览器中，可以使用JavaScript绘制圆角，或者使用CSS3的`border-radius`属性。 18. **跳动菜单**：通过改变元素的位置和透明度，实现菜单项的动态跳动效果。 19. **页面抓取照片*...

    Android使用CardView实现圆角对话框

    之前设置对话框的圆角效果都是通过 drawable/shape 属性来完成，但随着 Google API 的不断更新，API 21（Android 5.0）添加了新的控件 CardView，这使得圆角的实现更加方便快捷。 使用 CardView 实现圆角对话框的...

    IOS应用源码——类似苹果内置谷歌地图的翻页效果.zip

    该压缩包文件“IOS应用源码——类似苹果内置谷歌地图的翻页效果.zip”主要包含了一个iOS应用的源代码，其特色在于实现了类似苹果内置谷歌地图的翻页效果。这通常指的是在iOS应用中，用户可以像翻动实体书页一样浏览...

    jQuery+CSS3 google登录界面

    2. **表单元素**：为输入框和按钮添加适当的边框、阴影和圆角，以符合Google简洁的设计风格。可以使用伪元素`::before`和`::after`来添加自定义图标。 3. **交互反馈**：当用户聚焦或输入内容时，提供视觉反馈，如...

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