圆角头像----CSS3特效

w3c:http://www.w3school.com.cn/cssref/pr_border-radius.asp

定义和用法

border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。

提示:该属性允许您为元素添加圆角边框!

属性border-radius:50px;

这时候头像的外框就有圆角效果

div
{
  border:2px solid;
  border-radius:50%;
}

时间: 2024-11-03 05:09:43

圆角头像----CSS3特效的相关文章

一款基于jquery和css3的头像恶搞特效

今天给大家分享一款基于jquery和css3的头像恶搞特效.这款实例中,一个头像在画面中跳舞,头像还有可爱的帽子,单击下面的按钮可以为头像切换不同的帽子.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wwiaftm-container"> <div class="base wwiaftm"> <div class="body-1 wwiaftm"> <div

Unity用户自定义圆角头像

前天朋友遇到一个这样的需求,而且比较棘手让我帮忙解决.需求就是棋牌类的游戏,玩家的个人资料中包括自己的头像而且可以浏览相册中的图片或者使用相机拍照设置.关于这个问题我也查阅一些资料,由于涉及安卓部分知识,首先要了解Unity和安卓是如何通信的. 首先看到的是雨松老师的博客:http://www.xuanyusong.com/archives/1480咱们可以一起参考下这篇博客.好了,废话就不多说了,夜已深,开始撸代码吧! 1 新建空的工程 2,头像显示当然要用图片了,就用UGUI的RawImag

【android】 圆角头像

I:画圆角: 1 private void roundImg(ImageView iv){ 2 3 /**本地资源*/ 4 5 InputStream is = getResources().openRawResource(R.drawable.icon); 6 7 Bitmap bitmap = BitmapFactory.decodeStream(is); 8 9 /**网络资源*/ 10 11 //FileInputStream fis = new FileInputStream(url)

纯css3特效实现的文字亮光

纯css3特效实现的文字亮光 演示地址:http://www.huiyi8.com/css3/ [代码] [CSS]代码 body{  background: #111;} .shiny{  color: #F5C21B;  background: -webkit-gradient(linear, left top, left bottom, from(#F5C21B), to(#D17000));  -webkit-background-clip: text;  -webkit-text-fi

CSS3特效----制作3D旋转照片展示区

任务一.制作多背景 提示:上层有一个径向渐变,渐变图像farthest-side ellipse at center,  rgba(246,241,232,.85) 39%,rgba(212,204,186,.5) 100%),底层使用背景图片. 任务二.控制背景图像尺寸 提示:使用background-size,让两层背景都是全屏显示 任务三.给每个列表项添加过渡动画效果 提示:使用transition属性,给每个列表项.item设置变形过渡效果.transition: -webkit-tra

Android Demo---如何敲出圆角的Button+圆角头像

经常玩儿App的小伙伴都知道,APP上面有很多按钮都是圆角的,圆形给人感觉饱满,富有张力,不知道设计圆角按钮的小伙伴是不是和小编有着相同的想法`(*∩_∩*)′,听小编公司开发IOS的小伙伴说,他们里面直接有圆角的button,但是对于开发Android的小伙伴就不一样了,里面没有直接的圆角button可以供我们使用,在xml里面布局一个button,还不是圆角的,怎么办nie,方法总比困难多,我们成长的机会又来了,最近在小编的项目中,需要用到圆角的button,还需要用到圆角的头像,经过半天捣

14种网页jQuery和css3特效插件代码演示

1.网页table增删样式代码 演示和下载地址 2.jQuery左右滑动幻灯片插件 演示和下载地址 3.jQuery文字轮播焦点图 演示和下载地址 4.网页文字焦点图切换 演示和下载地址 5.jQuery a标签锚链滚动特效 演示和下载地址 6.css3自适应导航菜单栏 演示和下载地址 7.jQuery 100计时特效代码 演示和下载地址 8.html5视频播放器自定义美化代码 演示和下载地址 9.网页右侧悬浮滚动特效代码 下载和演示地址 10.网页能拖拽图层移动的js代码 演示和下载地址 11

HTML5+CSS3特效设计集锦

20款CSS3鼠标经过文字背景动画特效 站长之家 -- HTML5特效索引  30个酷毙的交互式网站(HTML5+CSS3)

IE系列不支持圆角等CSS3属性的解决方案

IE系列浏览器不支持CSS的圆角(border-radius)等CSS3属性是一个众所周知的问题,而FF.Chrome原生的浏览器支持是的优雅的圆角感觉较好,如何解决这个问题呢? 一种比较传统的方案是放弃CSS3,使用背景图,但是这种方式也会有诸多问题,对页面结构改动较大,需要对自适应大小进行控制等,成本较高. 另外一种是百度了一下,发现有个开源的插件可以解决此问题:http://css3pie.com/ 使用方法很简单,下载了之后直接引用.htc文件即可. 附: htc = HTML Comp