色天使为您找到"

shape outside

"相关结果

CSS Shapes Module Level 1 - World Wide Web …https://www.w3.org/TR/css-shapes-1The following styling creates a shape much smaller than the float’s content area, and adds a margin-top to the float. In the picture, the shape is rendered in blue, the content area outside the shape in mauve, and the margin area of the float box in yellow.

The following styling creates a shape much smaller than the float’s content area, and adds a margin-top to the float. In the picture, the shape is rendered in blue, the content area outside the shape in mauve, and the margin area of the float box in yellow.
www.w3.org/TR/css-shapes-1

Changing the shape outside - linkedin.comhttps://www.linkedin.com/.../changing-the-shape-outside?autoplay=trueShape-outside allows us to change the shape of the bounding box of a floated element to a shape other than a square box. The shape can be a circle, an oval, an inset, a polygon, or even the alpha ...

Shape-outside allows us to change the shape of the bounding box of a floated element to a shape other than a square box. The shape can be a circle, an oval, an inset, a polygon, or even the alpha ...
www.linkedin.com/.../changing-the-shape-outside?au...

shape-outside - CSS: Cascading Style Sheets | MDNhttps://developer.mozilla.org/en-US/docs/Web/CSS/shape-outsideThe shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.

The shape-outside CSS property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap.By default, inline content wraps around its margin box; shape-outside provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.
developer.mozilla.org/en-US/docs/Web/CSS/shape-out...

html - CSS Shape Outside - Firefox Browser Support - …https://stackoverflow.com/questions/27706119/css-shape-outside...I've been trying to get a CSS shape working cross browser, I've got it working in Chrome and Safari without any issues, I cannot seem to get it working in Firefox (not tested IE yet, not looking forward to that).

I've been trying to get a CSS shape working cross browser, I've got it working in Chrome and Safari without any issues, I cannot seem to get it working in Firefox (not tested IE yet, not looking forward to that).
stackoverflow.com/questions/27706119/css-shape-out...

shape-outside | CSS-Trickshttps://css-tricks.com/almanac/properties/s/shape-outsideThe shape-outside property controls how content will wrap around a floated element’s bounding-box. Typically this is so that text can reflow over a shape

The shape-outside property controls how content will wrap around a floated element’s bounding-box. Typically this is so that text can reflow over a shape
css-tricks.com/almanac/properties/s/shape-outside

Outside The Shapehttps://www.outsidetheshape.com1222 10th Avenue S.E Calgary Alberta Canada T2G 0W7

1222 10th Avenue S.E Calgary Alberta Canada T2G 0W7
www.outsidetheshape.com

Think outside the box with CSS shape-outside – Hacker …https://hackernoon.com/mastering-css-series-shape-outside-44d626270b25Shape-outside is a new CSS property that changes the shape of items that are wrapped. Instead of being limited to a rectangular bounding box around the image, shape-outside allows us to shape content to fit the image.

Shape-outside is a new CSS property that changes the shape of items that are wrapped. Instead of being limited to a rectangular bounding box around the image, shape-outside allows us to shape content to fit the image.
hackernoon.com/mastering-css-series-shape-outside-...

shape-outside | Codrops CSS Referencehttps://tympanus.net/codrops/css_reference/shape-outsideThe shape-outside property is used to change the geometry of a float element‘s float area.. Changing an element’s float area means changing the way the content flows around the floating element. Every element on a web page is rectangular, and is seen as a rectangle by every other element on the page.

The shape-outside property is used to change the geometry of a float element‘s float area.. Changing an element’s float area means changing the way the content flows around the floating element. Every element on a web page is rectangular, and is seen as a rectangle by every other element on the page.
tympanus.net/codrops/css_reference/shape-outside

CSS Shapes: Breaking the Rectangular Design Shackles ...https://www.sitepoint.com/css-shapes-breaking-rectangular-designThe shape-outside property allows us to use a few different functions to define the shape: inset() The inset() function allows you to define an …

The shape-outside property allows us to use a few different functions to define the shape: inset() The inset() function allows you to define an …
www.sitepoint.com/css-shapes-breaking-rectangular-...

CSS shape-margin, shape-outside not working - Stack …https://stackoverflow.com/questions/35293136/css-shape-margin...How are the shapes created for shape-outside and shape-margin? The shape-outside property's reference box is always the margin-box of the element.So when the imaginary circle is drawn with shape-outside property, it is drawn based on the size of element plus its margins. Once the shape is drawn, the shape-margin property is then used to draw a larger shape outside …How are the shapes created for shape-outside and shape-margin? The shape-outside property's reference box is always the margin-box of the element . So when the imaginary circle is drawn with shape-outside property, it is drawn based on the size of element plus its margins. Once the shape is drawn, the shape-margin property is then used to draw a larger shape outside of it. The below screenshot shows how they actually get created. The innermost circle is the actual image, the lighter blue one which is offset a little from the inner circle is the actual shape that is created using the shape outside property. It is offset slightly from the actual circle shape because again reference is the margin-box and since you've set only a margin-right , it gets offset to the right. The large outer circle is the shape that is drawn based on the shape-margin property. The radius of this circle will be 12em + .25em (margin-right/2) + the actual size of the element (roughly 80px x 80px). Any limits on how large the imaginary shape created for shape-margin can be? Now, the key thing to note is that the shape that is created by the shape-margin will always be limited to the margin-box of the element and so anything beyond it will get clipped. In this example, the entire shape is outside of the margin-box of the element and thus what we see ends up as just a square. Source for the above is this HTML5Rocks article : Remember, the shape is ultimately constrained to the element’s margin-box (the element plus its surrounding margin) In the below screenshot, the black square (created with a pseudo + a div wrapper) represents what is the margin-box area of the img . img { float: left; max-height: 5em; margin-right: .5em; -webkit-shape-margin: 12em; shape-margin: 12em; -webkit-shape-outside: circle(50%); shape-outside: circle(50%); } /* added just to indicate where margin box ends */ div { position: relative; } div:after { position: absolute; content: ''; height: 80px; width: calc(.5em + 80px); /* 80px is width of element + .5em margin */ border: 1px solid; top: 0px; left: 0px; } <h2>Example of shape margin</h2> <div> <img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style=""> <p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p> </div> So, what is the solution? This means for the shape-margin to work properly, the bigger circle (the reference for margin) should be created such that it is contained within the margin-box of the element. Option 1: Set shape-margin lower than margin-right This can either be done by setting the shape-margin such that it is less than the margin-right like in the below snippet. img { float: left; max-height: 5em; margin-right: .5em; -webkit-shape-margin: .15em; shape-margin: .15em; -webkit-shape-outside: circle(50%); shape-outside: circle(50%); } <h2>Example of shape margin</h2> <img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style=""> <p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p> Option 2: Set margin-right larger than shape-margin Or, it could be done by setting a margin-right larger than the shape-margin value like in the below snippet. img { float: left; max-height: 5em; margin-right: 2.5em; -webkit-shape-margin: .25em; shape-margin: .25em; -webkit-shape-outside: circle(50%); shape-outside: circle(50%); } <h2>Example of shape margin</h2> <img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style=""> <p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p> But problem with second option is that as the margin-right increases, shape's radius also increases because the margin-box is the reference and so the shape-margin has to be very very smaller than the margin-right . Option 3: Set shape outside's reference as border-box and shape-margin same as margin-right Or,another option would be to set the reference box of shape-outside property to border-box of the img element. This would mean the size of shapes don't get affected by margins. Another advantage of setting border-box as reference for the shape-outside property is that shape is not drawn at on offset (as margins again doesn't affect it). img { float: left; max-height: 5em; margin-right: 12em; -webkit-shape-margin: 12em; shape-margin: 12em; -webkit-shape-outside: circle(50%) border-box; shape-outside: circle(50%) border-box; } <h2>Example of shape margin</h2> <img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png" style=""> <p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p> Note: There is actually a circular shape margin in the above snippet but that is not seen clearly because a portion of such a large circle is invariably almost a straight line. You can see the circle through Dev tools.Best answer · 5It looks as though shape-margin is causing the issue here. I must admit this isn't something I've tried before but using a normal margin instead of shape-margin seems to work: img { float: left; max-height: 5em; margin: 0.5em 0.5em 0.5em 0; -webkit-shape-outside: circle(50%); shape-outside: circle(50%); } <h2>Example of shape margin</h2> <img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png"> <p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>2Disclaimer : The shape-outside property should not be used in live projects 1 . It may be subject to undesired behaviours. The problem seems to come from the fact that the shape-margin is much bigger that the boundaries of the image. As you can see in this example, the shape-margin works : img { float: left; max-height: 5em; -webkit-shape-margin:1em; shape-margin:1em; -webkit-shape-outside: circle(25%); shape-outside: circle(25%); } <h2>Example of shape margin</h2> <img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png"> <p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p> If you need a big shape-margin, you can wrap the image in a div and apply the shape-outside and shape-margin properies to the div : .img { float: left; -webkit-shape-margin: 3.5em; shape-margin: 3.5em; -webkit-shape-outside: circle(2.5em); shape-outside: circle(2.5em); } .img img{ max-height:5em; margin:3.5em; } <h2>Example of shape margin</h2> <div class="img"> <img src="http://icons.iconarchive.com/icons/custom-icon-design/flatastic-6/128/Circle-icon.png"> </div> <p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p> 1 The CSS Shapes Module Level 1 actualy (july 2015) has the status of "Candidate Recommendation". As this means it is a work in progress, it may change at any moment and therefore should not be used other than for testing.2Possibly it was an issue with the image you used but this seems to work...in Chrome. Deleting this helped also: -webkit-shape-margin: 12em; shape-margin: 12em; img { width: 5em; height: auto; min-width: 150px; float: left; margin-right: 2rem; border-radius: 50%; -webkit-shape-outside: circle(); shape-outside: circle(); } <h2>Example of shape margin</h2> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/kiwifruit-on-a-plate.jpg" alt="A photograph of sliced kiwifruit on a while plate" /> <p>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsu mlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum</p>1

How are the shapes created for shape-outside and shape-margin? The shape-outside property's reference box is always the margin-box of the element.So when the imaginary circle is drawn with shape-outside property, it is drawn based on the size of element plus its margins. Once the shape is drawn, the shape-margin property is then used to draw a larger shape outside …
stackoverflow.com/questions/35293136/css-shape-mar...