为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/HTML/CSS

/重拾CSS的乐趣

我想知道怎样裁取四分之一使用的呢？

http://img1.sycdn.imooc.com//5787456b0001d31813310555.jpg

有效的效果是一个整体的四分之一，那如何去操作只显示四分之一的部分呢


yuyan

2016-07-14

源自：重拾CSS的乐趣  3-1

关注问题 我要回答
1807
操作
收起

正在回答

1 回答

慕粉3462923 回答被采纳 +3 积分
2016-07-14

.box{

width: 100px;

height: 100px;

margin: 50px auto;

background-image: radial-gradient(200px at 100px 0px, #fff 100px, #000 100px);

}

3 回复 有任何疑惑可以回复我~
收起回答
#1

weibo_哆啦A梦有大口袋_0

非常感谢你的回答 background-image: radial-gradient(200px at 100px 0px, #fff 100px, #000 100px); 能给我解释一下这行代码的意思,O(∩_∩)O谢谢
2016-07-15 回复 有任何疑惑可以回复我~
#2

yuyan 提问者

非常感谢！
2016-07-15 回复 有任何疑惑可以回复我~
#3

yuyan 提问者 回复 weibo_哆啦A梦有大口袋_0

我也是第一次见这个，刚刚百度找了没找到。只能让大神有时间再教一下啦
2016-07-15 回复 有任何疑惑可以回复我~
#4

yuyan 提问者 回复 weibo_哆啦A梦有大口袋_0

自己多试着改改说不定可以悟出来些什么
2016-07-15 回复 有任何疑惑可以回复我~
#5

慕粉3462923 回复 weibo_哆啦A梦有大口袋_0

客气哈。200px at 100px 0px这句，at后边的100px,0px意思是以这个坐标点(盒子模型的右上角)为圆心做渐变，at前边的大概是径向渐变的形状与大小，基本就是圆形(circle)或椭圆(ellipse)，数值是半径，其实应该有主要半径和次要半径2个值，如果两个值一样就还是圆形渐变，我这里写的200px也不准确，其实写成circle应该就可以了。后面的#fff 100px,#000 100px，就是老师讲的渐变颜色半径重叠在一起导致没有渐变效果这个意思，#fff应替换为transparent。
2016-07-15 回复 有任何疑惑可以回复我~
#6

慕粉3462923 回复 weibo_哆啦A梦有大口袋_0

还有一点因为半径100px为重叠的点，所以最开始那个数值除了用circle，只要是大于100px的其他数值好像都可以达到这个效果，但不能是100px，具体原因我猜测都是100px的话渐变图形会相互抵消。。 我也是新手自己瞎琢磨，不对的地方还请指正。
2016-07-15 回复 有任何疑惑可以回复我~
#7

DasiyOulu 回复 weibo_哆啦A梦有大口袋_0

radial-gradient括号里内容可以看出这个由三部分组成。 第一部分：设置径向渐变中心位置在容器的中心点，回答者的“200px at 100px 0px”，其中的200px我不知道什么意思，我看官方写法是“circle at 100px 0px”，其中100px 0px是圆心点坐标。 后两部分不用解释，就是渐变色和渐变色起点。
2016-12-06 回复 有任何疑惑可以回复我~
#8

DasiyOulu 回复 weibo_哆啦A梦有大口袋_0

background-image: radial-gradient(circle at 100px 0, transparent 100px, pink 100px); 你可以试一下，效果一样，而且用transparent让颜色跟随父级，通用性强一些。
2016-12-06 回复 有任何疑惑可以回复我~
查看5条回复

举报

0/150
提交
取消
重拾CSS的乐趣
  • 参与学习       72803    人
  • 解答问题       27    个

开发中使用CSS时的一些经验感悟，魔法哥带你玩儿转有乐趣的CSS

进入课程

我想知道怎样裁取四分之一使用的呢？

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信