Sina Visitor System第1章 一件趣事&&用CSS绘制图标...
第2章 一件乐事&&近十年来最重要的CS...
第3章 用CSS实现内凹圆角
第4章 总结
下一节课程： 总结
3 秒后播放下一节
请输入问题内容...
请输入笔记内容...
你发的评论可能会是问题？是否将他发到问答中
Copyright (C) 2018 imooc.com All Rights Reserved | 京ICP备 号-2
本次提问将花费2个积分
你的积分不足，无法发表
本次提问将花费2个积分
继续发表请点击 "确定"background-image: radial-gradient(200px at 50px 0px, #fff 50px, #px);
这是做内凹圆角的核心代码，就是背景图的radial-gradient，只设置两种颜色，中间不进行过渡渐变。两种颜色叠到一起就是一条实线，看上去就是两个色块的拼接。
1.立体质感圆球
网上看到的一个很有趣的小案例&&用radial-gradient制作的立体质感小圆球。
就一行代码！
&span class="egg"&&/span&
.egg {display: block;margin-top: 30px;width: 100px;height: 100px;border-radius: 50px;background: radial-gradient(at 35px 35px, #FFF, #CCC, #FFF);background: -webkit-radial-gradient(35px 35px, #FFF, #CCC, #FFF);}
2.手动内凹如下是一种用一个圆和一个方形盒子叠加做出的内凹圆角的的效果。
1 &div class="something-meaningful brdradius"&&/div&
2 &div class="something-meaningful"&
&a href="http://www.w3cplus.com/css3/css-secrets/inner-rounding.html"&&/a&
1 .something-meaningful {display: inline-block;width: 55px;height: 55px;overflow: hidden;line-height: 130px;background: #655;text-align: center;/* padding: .8 */position: relative;float: left;}
2 .brdradius {border-top-left-radius: 45%;}
3 .something-meaningful& div {width: 100px;height: 100px;background: #fff;border-radius: 5em;position: absolute;top: -46px;left: 2px;/*padding: 1*/}
3.我自己也来玩玩
&span class="radius"&&/span&
1 .radius {width: 50px;height: 50px;line-height: 100px;display: block;text-align: center;background-image: radial-gradient(200px at 50px 0px, #fff 50px, #px);}
利用个背景色的径向渐变background-image: radial-gradient(200px at 50px 0px, #fff 50px, #px);，
就画出这么一个小内凹角来，想要另外方向的也可以变化。如下的一个完整案例
&ul class="uls"&
&span class="li-boradiu"&&/span&
&span class="li-boradiu"&&/span&
&li&3&/li&
1 .uls{list-style-type: none;*zoom: -1;}
2 .uls:after{content: "";clear: both;display: block;}
3 .uls li{display: block;float: left;width: 120px;height: 35px;background-color: #4169E1;text-align: center;line-height: 35px;color: white;/*做上圆角*/border-top-left-radius : 15px;
border-top-right-radius : 15px;
4 .li-boradiu{display: inline-block;width: 35px;height: 35px;/*background-color: #4169E1;*/background-image: radial-gradient(70px at 17.5px 0, #f00);}
参考资料：radial-gradient CSS3的蛋疼的径向渐变
1 &!DOCTYPE html&
5 &meta charset="UTF-8"&
6 &title&内凹圆角&/title&
7 &meta name="description" content="css3，内凹圆角"&
8 &meta name="author" content="郭菊锋"/&
9 &style type="text/css"&
11 display: block;
12 margin-top: 30px;
13 width: 100px;
14 height: 100px;
15 border-radius: 50px;
16 background: radial-gradient(at 35px 35px, #FFF, #CCC, #FFF);
17 background: -webkit-radial-gradient(35px 35px, #FFF, #CCC, #FFF);
20 .something-meaningful {
21 display: inline-block;
22 width: 55px;
23 height: 55px;
24 overflow: hidden;
25 line-height: 130px;
26 background: #655;
27 text-align: center;
28 /* padding: .8 */
29 position: relative;
30 float: left;
33 .brdradius {
34 border-top-left-radius: 45%;
37 .something-meaningful& div {
38 width: 100px;
39 height: 100px;
40 background: #fff;
41 border-radius: 5em;
42 position: absolute;
43 top: -46px;
44 left: 2px;
45 /*padding: 1*/
48 .radius {
49 width: 50px;
50 height: 50px;
51 line-height: 100px;
52 display: block;
53 text-align: center;
54 background-image: radial-gradient(200px at 50px 0px, #fff 50px, #px);
57 list-style-type: none;
58 *zoom: -1;
60 .uls:after{
61 content: "";
62 clear: both;
63 display: block;
65 .uls li{
66 display: block;
67 float: left;
68 width: 120px;
69 height: 35px;
70 background-color: #4169E1;
71 text-align: center;
72 line-height: 35px;
73 color: white;
74 /*做上圆角*/
75 border-top-left-radius : 15px;
76 border-top-right-radius : 15px;
78 .li-boradiu{
79 display: inline-block;
80 width: 35px;
81 height: 35px;
82 /*background-color: #4169E1;*/
83 background-image: radial-gradient(70px at 17.5px 0, #f00);
85 &/style&
86 &/head&
90 &h3&1.网上看到的一个很有趣的小案例&&用radial-gradient制作立体质感圆球。&/h3&
91 &!--http://blog.csdn.net/playboyanta123/article/details/9303857--&
92 &span class="egg"&&/span&
94 &!--手动内凹！--&
95 &h3&2.如下是一种用一个圆和一个方形盒子叠加做出的内凹圆角的的效果。&/h3&
96 &div class="something-meaningful brdradius"&&/div&
97 &div class="something-meaningful"&
99 &a href="http://www.w3cplus.com/css3/css-secrets/inner-rounding.html"&&/a&
100 &/div&
101 &/div&
102 &h3 style="clear:padding-top: 10"&3.自己也来玩玩&/h3&
103 &span class="radius"&&/span&
104 &p&这样 利用个背景色的径向渐变background-image: radial-gradient(200px at 50px 0px, #fff 50px, #px);，就画出这么一个小内凹角来，想要另外方向的也可以变化。如下的一个完整案例&/p&
105 &ul class="uls"&
107 &span class="li-boradiu"&&/span&
110 &span class="li-boradiu"&&/span&
112 &li&3&/li&
119 &a href="http://blog.csdn.net/playboyanta123/article/details/9303857"&参考资料：radial-gradient CSS3的蛋疼的径向渐变&/a&
121 &/body&
123 &/html&
阅读(...) 评论()在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如图这种凹陷效果的分割线，用css3怎么实现
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
box-shadow:0 1px 0 rgba(0,0,0,.2) inset,0 -1x 0 rgba(255,255,255,.2)交换1px与-1px可以凸起；高亮和暗边是半透明了；不用考虑颜色了；
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
box-shadow: inset 0 -1px 0 rgba( 255, 255, 250, 0.6),
inset 0 -2px 0 rgba( 0, 0, 0, 0.1);
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
:before,:after{
伪元素配合两个border就可以实现，两个border的颜色是关键
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。&>&CSS 凹陷 文字 css 样式
CSS 凹陷 文字 css 样式
上传大小：346B
CSS凹陷文字!
很值得下载看看!资源免费,大家分享!!
综合评分：0
下载个数：
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有0条
积分&113289
VIP会员动态
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
输入下载码
为了良好体验，不建议使用迅雷下载
CSS 凹陷 文字 css 样式
会员到期时间：
剩余下载个数：
剩余积分：0
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
无法举报自己的资源
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可返还被扣除的积分
被举报人：
举报的资源分：
请选择类型
资源无法下载 （ 404页面、下载失败、资源本身问题）
资源无法使用 （文件损坏、内容缺失、题文不符）
侵犯版权资源 （侵犯公司或个人版权）
虚假资源 （恶意欺诈、刷分资源）
含色情、危害国家安全内容
含广告、木马病毒资源
*详细原因：
CSS 凹陷 文字 css 样式