html–CSS形状外 –Firefox浏览器支持_html-js-css

概述我一直在尝试使用跨浏览器的CSS形状,我已经在Chrome和Safari中使用它没有任何问题,我似乎无法在Firefox中工作(尚未测试IE,不期待那样).codepen这是HTML：<div class='container'> <section class='hero'> <section class='slid

我一直在尝试使用跨浏览器的CSS形状,我已经在Chrome和Safari中使用它没有任何问题,我似乎无法在firefox中工作(尚未测试IE,不期待那样).

codepen

这是HTML：

这是CSS：

.container {  wIDth: 960px;  margin: 0 auto;}section.hero {  padding: 8px;  Box-sizing: border-Box;  overflow: hIDden;  wIDth: 100%;  height: 400px;  float:left;  section.slIDe {    position:relative;    .shaped {      background-size: cover;      shape-outside: polygon(20% 0,100% 0,100% 100%,0% 100%);      clip-path: polygon(20% 0,0% 100%);      background-image: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);      height: 384px;      float:left;      wIDth: 70%;      float: right;      shape-margin: 20px;    }    .hero-text {      Box-sizing: border-Box;      background-color: #333;      color: white;      padding: 30px;      height: 384px;      wIDth: 50%;      h2 {        margin-bottom: 20px;      }    }  }}

我尝试过一种Adobe形状的polyfill,它没有任何区别,是否有其他选择,或者我应该考虑完全改变设计？

谢谢

最佳答案你可以使用svg的clipPath for cross-browser support.
.container {  wIDth: 960px;  margin: 0 auto;}section.hero {  padding: 8px;  -moz-Box-sizing: border-Box;  Box-sizing: border-Box;  overflow: hIDden;  wIDth: 100%;  height: 400px;  float: left;}section.hero section.slIDe {  position: relative;}.shaped {  background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);  height: 384px;  wIDth: 100%;}section.hero section.slIDe .hero-text {  -moz-Box-sizing: border-Box;  Box-sizing: border-Box;  background-color: #333;  color: white;  padding: 30px;  height: 384px;  wIDth: 50%;}section.hero section.slIDe .hero-text h2 {  margin-bottom: 20px;}svg {  float: right;}
您可以使用此方法添加曲线而不是直线.
这里有些例子.
.container {  wIDth: 960px;  margin: 0 auto;}section.hero {  padding: 8px;  -moz-Box-sizing: border-Box;  Box-sizing: border-Box;  overflow: hIDden;  wIDth: 100%;  height: 400px;  float: left;}section.hero section.slIDe {  position: relative;}.shaped {  background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);  height: 384px;  wIDth: 100%;}section.hero section.slIDe .hero-text {  -moz-Box-sizing: border-Box;  Box-sizing: border-Box;  background-color: #333;  color: white;  padding: 30px;  height: 384px;  wIDth: 50%;}section.hero section.slIDe .hero-text h2 {  margin-bottom: 20px;}svg {  float: right;}
.container {  wIDth: 960px;  margin: 0 auto;}section.hero {  padding: 8px;  -moz-Box-sizing: border-Box;  Box-sizing: border-Box;  overflow: hIDden;  wIDth: 100%;  height: 400px;  float: left;}section.hero section.slIDe {  position: relative;}.shaped {  background: url(http://www.e-architect.co.uk/images/jpgs/aberdeen/bon_accord_centre_tonyfreeman221207_04.jpg);  height: 384px;  wIDth: 100%;}section.hero section.slIDe .hero-text {  -moz-Box-sizing: border-Box;  Box-sizing: border-Box;  background-color: #333;  color: white;  padding: 30px;  height: 384px;  wIDth: 50%;}section.hero section.slIDe .hero-text h2 {  margin-bottom: 20px;}svg {  float: right;}
          总结       以上是内存溢出为你收集整理的html  –  CSS形状外 –  Firefox浏览器支持全部内容，希望文章能够帮你解决html  –  CSS形状外 –  Firefox浏览器支持所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。					
										


					
						欢迎分享，转载请注明来源：内存溢出
原文地址: http://outofmemory.cn/web/1124824.html

html–CSS形状外 –Firefox浏览器支持

发表评论

评论列表（0条）