css 实现内凹圆角

上图：

我们经常会去实现那种圆角的按钮，图片等等，但是想要实现这种内凹的圆角形状的块状还是比较复杂，我先讲讲思路：

第一，需要一个大块进行包裹，需要设置宽度和高度等；

第二，需要四个小块，来使用圆角的属性border-radius，进行不同方向的圆角设置；

第三，为这些块加上border属性。

代码如下：

<html>
<head>
<meta charset="utf-8"/>
<title>内凹圆角</title>
<style type="text/css">.cro {width: 100px;height: 100px;border: 1px solid #58C4E6;position: relative;}.cro_left_top, .cro_right_top, .cro_left_bottom, .cro_right_bottom {position: absolute;width: 20px;height: 20px;border: 1px solid #fff;z-index: 1;background: #fff;}.cro_left_top {top: -1px;left: -1px;border-radius: 0 0 20px 0;border-bottom: 1px solid #58C4E6;border-right: 1px solid #58C4E6;}.cro_right_top {top: -1px;right: -1px;border-radius: 0 0 0 20px;border-bottom: 1px solid #58C4E6;border-left: 1px solid #58C4E6;}.cro_left_bottom {left: -1px;bottom: -1px;border-radius: 0 20px 0 0;border-top: 1px solid #58C4E6;border-right: 1px solid #58C4E6;}.cro_right_bottom {right: -1px;bottom: -1px;border-radius: 20px 0 0 0;border-top: 1px solid #58C4E6;border-left: 1px solid #58C4E6;}
</style>
</head>
<body>
<div class="cro"><div class="cro_left_top"></div><div class="cro_right_top"></div><div class="cro_left_bottom"></div><div class="cro_right_bottom"></div>
</div>
</body>
</html>

css 实现内凹圆角相关推荐

android 内凹的圆角,css实现内凹圆角，利用圆角反向进行（转）
最近写到小程序,设计方面有一个设计图涉及内凹圆角问题.网上百度好多种,都是经过径向渐变实现的.虽然能实现单个角,可是当四个角合在一块儿就很麻烦了. 上设计图css 径向渐变实现:html backgr ...
css实现内凹圆角，利用圆角反向进行（转）
最近写到小程序,设计方面有一个设计图涉及内凹圆角问题.网上百度好多种,都是通过径向渐变实现的.虽然能实现单个角,但是当四个角合在一起就很麻烦了. 上设计图径向渐变实现: background:rad ...
css边框凹圆角,你知道怎么利用css实现内凹圆角么
本文利用径向渐变来实现背景透明的内凹圆角. (视频教程推荐:css视频教程) 基本线性渐变div { height: 100px; width: 200px; background-image: li ...
android 内凹的圆角,css实现内凹圆角样式
最新开发遇到一个弹框,弹框中间有两个内凹的半圆,而且还是透明的,不能遮挡到底层的内容.基于这个需求,找到了一个比较好的实现方法. 先上一下demo效果图: image.png 实现这个效果主要是用了b ...
css图形绘制：实现内凹圆角、月亮、拼图块、优惠券（无隐藏图形遮挡下层元素）
核心知识点:CSS radial-gradient() 函数,用径向渐变创建 "图像" 在开始些样式前,先在html代码放个div标签即可. <div class=" ...
css图形绘制，实现内凹圆角盒子中间凹陷为一个圆形
提示:以下是本篇文章正文内容,下面案例可供参考一.案例要求示例: 二.实现代码 1.代码如下(示例): <div style="display:flex">< ...
css 类似优惠券邮票那样的内抠圆角样式，内凹圆角处理
1.优惠券如图这样: 实现: <!DOCTYPE html> <html lang="en"> <head><meta charset=& ...
lisp 发凹圆角_css能实现这样的内凹圆角吗？如何实现？具体代码是！！
展开全部比较笨的方式,截图以及代码具体如下. e68a8462616964757a686964616f31333337626162 .cro{ width: 100px; height: 100px ...
java生成一个矩阵outline_border、outline、boxshadow那些事以及如何做内凹圆
border 边框是我们美化网页.增强样式最常用的手段之一.例如: .text { width: 254px; height: 254px; background-color: #33AAE1; bo ...

css 实现内凹圆角

css 实现内凹圆角相关推荐

最新文章

热门文章