共计 1073 个字符,预计需要花费 3 分钟才能阅读完成。
每天一个 CSS- 用券卡片
卡券成果预览地址
效果图
疑难
圆角好画,然而缺圆角怎么画呢?
思路
第一步:卡片背景色填充不便调试。【OK】
第二步:辨别元素,依照上、中、下的程序排序重叠。【OK】
第三步:画圆缺角,也是比拟重要的一步。【?】
知识点
background: radial-gradient
绘制圆缺角的重要知识点,背景色径向突变。
实现思路的源代码地址
程度方向卡片,右上、右下缺圆角
- 创立圆形,应用镜像突变在方块下面创立一个圆。
- 地位调整,调整圆的地位,将圆的中点调整至方块角处,造成凹圆角。
background: radial-gradient(circle at right top, transparent 5px, #44C9A1 0);
- 绘制第二个圆、与调整地位,
background: radial-gradient(circle at right bottom, transparent 5px, #44C9A1 0);
,发现得不到想要的成果。 - 剖析起因:background 属性,默认 100% 大小与 repeat 开展,导致了重叠。
- 设置背景:background:no-repeat;background-size:100% 50%(程度方向 垂直方向),(这里设置 50% 在垂直方向,是因为筹备在右上、右下方向设置缺角)。
- 设置实现后发现得不到成果,最初发现疏忽了一个重要的事件,就是背景开展方向,因为是垂直的,所以应该是从上右到左下与下右到左上。所以批改为 background: radial-gradient(circle at bottom right, transparent 5px, #44C9A1 0) bottom right;
参数阐明
radial-gradient(circle at bottom right, transparent 5px, #44C9A1 0) bottom right
circle: 圆形。
at : 位于。
bottom right : 右下角(可用 % ,px 等具备单位的数值示意)transparent: 圆的背景色彩以父元素为准。
5px: 圆的半径。
44c9A1:方块的背景色彩
0:径向突变的水平,值为 0 时,无突变。当值大于 0 时,从圆心处径向突变至方块。
bottom right:示意方块背景的起始地位。
filter: drop-shadow
会依照图形(不限于图片,三角形也能够)形态在图片背地进行投影,即当背景通明时依照图形轮廓边界投影暗影。成果地址
效果图:
区别 box-shadow,boxShadow 是以元素边界轮廓进行投影
。
浏览器反对
Chrome , FirFox, EDge 最新版本都反对, 不思考 IE。
正文完