圆角矩形、阴影、伪元素的应用实例iphone手机壳

翻译 2015年11月19日 16:28:55

阴影(box-shadow

Box-shadow: 水平阴影 垂直阴影 模糊距离  阴影尺寸 阴影颜色 内外阴影;

里面只有水平阴影和垂直阴影是必须的。其他的可以省略有默认值。

 默认的外阴影 outset  不能写,写上就看到效果

伪元素

Before  after 两个 伪元素

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>iphone手机壳</title>
<style>
	.iphone{
		width:300px;
		height:600px;
		background-color:#2e2e2e;
		margin:50px auto;
		border:10px solid #3b3b3b;
		border-radius:30px;
		box-shadow:5px 5px 5px rgba(0,0,0,0.5);
		position:relative;
		}
	.iphone::before{
		content:"";
		width:66px;
		height:6px;
		background-color:#2e2e2e;
		position:absolute;
		top:-16px;
		right:60px;
		border-radius:3px 3px 0 0;
		}
	.iphone::after{
		content:"";
		position:absolute;
		width:6px;
		height:45px;
		background-color:#2e2e2e;
		border-radius:3px 3px 0 0;
		left:-16px;
		top:100px;
		}
	.light{
		width:8px;
		height:8px;
		border:3px solid #4a4a4a;
		background-color:#1a1a1a;
		border-radius:50%;
		margin:10px auto;
		margin-top:30px;
		box-shadow:2px 2px 2px rgba(0,0,0,0.5);
		}
	.speaker{
		width:70px;
		height:5px;
		border:3px solid #4a4a4a;
		background-color:#1a1a1a;
		border-radius:16px;
		margin:0px auto;
		box-shadow:2px 2px 2px rgba(0,0,0,0.5);
		}
	.content{
		width:270px;
		height:450px;
		background-color:#0a0a0a;
		margin: 20px auto 0;
		border-radius:10px;
		border:4px solid #1a1a1a;
		color:#fff;
		text-align:center;
		font:35px/450px "微软雅黑";
		}
	.home{
		width:50px;
		height:50px;
		border-radius:50%;
		background-color:#1a1a1a;
		margin:8px auto;
		position:relative;
		
		
		}
	.home::before{
		content:"";
		width:20px;
		height:20px;
		position:absolute;
		border-radius:3px;
		top:14px;
		left:14px;
		border:2px solid #fff;
		
		}
</style>
</head>

<body>
<div class="iphone">
	<div class="light"></div>
    <div class="speaker"></div>
    <div class="content">iphone8</div>
    <div class="home"></div>
</div>
</body>
</html>


CSS学习(六)-css圆角边框高级效果、边框阴影效果(上)

一、理论: 1.border-radius: a.表格应用圆角:表格必须使用border-collapse属性为separate,表格圆角才能正常显示 b.圆形:元素的宽度和高度相同,圆角的半径...
  • bwshqh
  • bwshqh
  • 2016年03月04日 01:05
  • 1646

Android带渐变效果的圆角矩形Demo

/** * 带渐变色效果的圆角矩形 * * @description: * @author ldm * @date 2016-4-26 下午3:47:12 */ public class...
  • true100
  • true100
  • 2016年04月26日 16:09
  • 2467

大量的用伪元素可以实现的奇妙效果

译自https://css-tricks.com/pseudo-element-roundup/ 大量的用伪元素可以实现的奇妙效果   用伪元素:before,:after你可以做出很多神奇的...
  • natalie86
  • natalie86
  • 2015年03月26日 21:26
  • 1872

anroid边框阴影-圆角阴影-渐变阴影

anroid给边框加阴影只能对内阴影,没有给边框对外加阴影,在自定义shape中增加一层或多层,并错开,即可显示阴影效果。 1.圆角阴影效果(内阴影),不能加渐变色 ...
  • TS_learner
  • TS_learner
  • 2017年04月25日 22:16
  • 1596

CSS3基础第一篇(圆角,阴影,渐变,选择器)

1.border-radius:1px 2px 3px 2px;  /*添加圆角  四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */  2.box-shadow:0px 0px 1...
  • leiwen_su
  • leiwen_su
  • 2016年04月27日 09:02
  • 1550

iOS圆角和阴影并存

当我搬起砖头时,我无法拥抱你;当我放下砖头时,我无法养活你!虐不虐,你就说虐不虐~ 扯得有点多了,回归主题~ 先贴一下效果图 圆角和阴影无法共存的原因就是因为这句代码。Because s...
  • Tonyshng
  • Tonyshng
  • 2017年07月01日 09:46
  • 1220

html5 Canvas画图10:圆角矩形

本文属于《html5 Canvas画图系列教程》 上一篇文章我讲了画矩形和圆形的方法,他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来。 一个正常的圆角矩形,...
  • happyrabbit456
  • happyrabbit456
  • 2017年02月14日 15:34
  • 502

Css暴力绘制圆角矩形

Css3.0中有border-radius;属性可以绘制,当圆角设置为整个border一半大小的时候,还可以画出圆和椭圆。 这里讲一下一种暴力绘制的思路 其实方法很简单,圆角矩形和普通矩形的区别主...
  • u011718707
  • u011718707
  • 2016年08月16日 11:15
  • 263

Android自定义圆角矩形

【声明】转载请注明出处,此文出自指尖飞落的博客:http://blog.csdn.net/huntersnail ——尊重作者,知识无价,交流无限! 这个很简单没什么好说的,笔者也是记...
  • huntersnail
  • huntersnail
  • 2015年08月10日 14:48
  • 2131

GDI+绘制圆角矩形

1、最近,想要用GDI+绘图,但是发现
  • wwkaven
  • wwkaven
  • 2014年07月08日 23:05
  • 2565
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:圆角矩形、阴影、伪元素的应用实例iphone手机壳
举报原因:
原因补充:

(最多只允许输入30个字)