shape-outside property无法正常工作

-1

我刚开始尝试使用css中的shape-outside属性，但无论使用多少个文档或博客，我都无法使其工作。我可能犯了一个愚蠢的错误，但我不确定。有人能指出错误吗？shape-outside property无法正常工作

#q { 
 
    background-color: #E6C9C9; 
 
    /*height: 100%; 
 
\t width: 100%;*/ 
 
    float: left !important; 
 
    -webkit-shape-outside: circle(50%); 
 
    shape-outside: circle(50%); 
 
}

<html> 
 

 
<head> 
 
    <title>Testing Split Div</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    <link rel="stylesheet" href="styles.css"> 
 
</head> 
 

 
<body> 
 

 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div id="q">Lorem ipsum dolor sit amet, modo interesset at vim, et vix oporteat vituperatoribus. Numquam nominavi deseruisse pri ut. At vix animal lobortis, oblique fierent expetendis has ea. Quas graeci aeterno at mei. Et duo voluptatum scripserit, quo habeo 
 
     tamquam at. Ornatus maiorum elaboraret te mea. Civibus omnesque accusamus mel at. Oratio labitur pro ei, vel an legere altera commune, veniam neglegentur no qui. Vel cu soluta adversarium. Ex idque aeterno est, cu nec aperiam constituam mediocritatem. 
 
     Vix propriae incorrupte an, malis congue concludaturque no his. Meliore deseruisse cum te. Usu ex homero assueverit. Summo iudico dolores cu eum, eum falli deterruisset ut. Eu evertitur forensibus philosophia est, alterum phaedrum principes te 
 
     est. No pri recteque percipitur. Eu sumo zril rationibus vel. Possit impetus ex has. Impetus delenit ea mel, sit aliquip recusabo ex, cum nibh sensibus ex. Sed an ubique aliquip alienum, exerci detraxit ea eam. Ad sea error labore percipitur. 
 
     Amet liber adipiscing vel in, virtute laboramus est ad, an nam probatus convenire definiebas. An ius facete latine epicurei. Aeque dicunt sed cu, vidisse complectitur an per, mel ea quem repudiare. Mel ex liber laoreet, cu eam altera accommodare 
 
     consectetuer, illum veritus consetetur pro ad. Hendrerit appellantur adversarium his te, suas liberavisse qui at, rebum ipsum ut mea. Duo ut quodsi accusamus.</div> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

来源

2017-05-26 Rehan

不能使用元素本身的outside-shape，但你可以使用:before或:after伪元素的outside-shape添加的元素。请参阅使用:before以下解决方案：

#q:before { 
 
    content:""; 
 
    display:block; 
 
    height:300px; 
 
    width:300px; 
 
    float: left; 
 
    -webkit-shape-outside: circle(50%); 
 
    shape-outside: circle(50%); 
 
} 
 
#q { 
 
    background-color: #E6C9C9; 
 
}

<html> 
 
    <head> 
 
    <title>Testing Split Div</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    <link rel="stylesheet" href="styles.css"> 
 
    </head> 
 
<body> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div id="q">Lorem ipsum dolor sit amet, modo interesset at vim, et vix oporteat vituperatoribus. Numquam nominavi deseruisse pri ut. At vix animal lobortis, oblique fierent expetendis has ea. Quas graeci aeterno at mei. Et duo voluptatum scripserit, quo habeo 
 
     tamquam at. Ornatus maiorum elaboraret te mea. Civibus omnesque accusamus mel at. Oratio labitur pro ei, vel an legere altera commune, veniam neglegentur no qui. Vel cu soluta adversarium. Ex idque aeterno est, cu nec aperiam constituam mediocritatem. 
 
     Vix propriae incorrupte an, malis congue concludaturque no his. Meliore deseruisse cum te. Usu ex homero assueverit. Summo iudico dolores cu eum, eum falli deterruisset ut. Eu evertitur forensibus philosophia est, alterum phaedrum principes te 
 
     est. No pri recteque percipitur. Eu sumo zril rationibus vel. Possit impetus ex has. Impetus delenit ea mel, sit aliquip recusabo ex, cum nibh sensibus ex. Sed an ubique aliquip alienum, exerci detraxit ea eam. Ad sea error labore percipitur. 
 
     Amet liber adipiscing vel in, virtute laboramus est ad, an nam probatus convenire definiebas. An ius facete latine epicurei. Aeque dicunt sed cu, vidisse complectitur an per, mel ea quem repudiare. Mel ex liber laoreet, cu eam altera accommodare 
 
     consectetuer, illum veritus consetetur pro ad. Hendrerit appellantur adversarium his te, suas liberavisse qui at, rebum ipsum ut mea. Duo ut quodsi accusamus.</div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

来源

2017-05-26 08:11:56

会考虑它并答复你回来。 – Rehan

感谢您的澄清。我错误地理解了它:) – Rehan

shape-outside property无法正常工作

回答

相关问题