rounded-corners

问题 I am drawing some view with diagonal side like this: code: let layerWidth = layer.frame.width let bezierPath = UIBezierPath() let pointA = CGPoint(x: 0, y: 44) let pointB = CGPoint(x: 150, y: 0) let pointC = CGPoint(x: layerWidth, y: 0) let pointD = CGPoint(x: layerWidth, y:44) bezierPath.move(to: CGPoint(x: pointA.x, y: pointA.y) ) bezierPath.addLine(to: CGPoint(x: pointB.x, y: pointB.y)) bezierPath.addLine(to: pointC) bezierPath.addLine(to: pointD) bezierPath.close() let shapeLayer =

问题 I am trying to round font-awesome icon. Please refer - http://jsfiddle.net/JfGVE/1704/ The problem is, not matter what, the rounded icon is more oval. Not able to make it a perfectly rounded. Below is the css code i have - i { display: inline-block; background: gray; color: white; border-radius: 50%; padding: 5px; } 回答1: Try to adjust height/width and reset line-height: i { display: inline-block; background: gray; color: white; border-radius: 50%; padding: 0.3em; /* adjust padding */ line

问题 I want to remove the corners of borders like this picture. 回答1: You can use ::before and ::after pseudo elements to cover (and thus, "hide") parts of the border: .bordery { border: 1px solid teal; padding: 20px; position: relative; } .bordery::after, .bordery::before { background-color: white; content: ""; display: block; height: 10px; position: absolute; width: 10px; } .bordery::after { bottom: -1px; right: -1px; } .bordery::before { top: -1px; left: -1px; } <div class="bordery">This is just

问题 I need to display images with rounded corner. Long time back I saw a website doing this using a javascript library that overlayed the rounded corner image over the normal image. Do we have any javascript library (preferably jQuery plugin) to do this directly to img tags rather than usijg image as background for a div? 回答1: You can apply CSS3 border-radius to img elements, but the results are a bit wonky. See for yourself: http://jsbin.com/exiha This explains why the overlay you’re talking

问题 I'd like to have an HTML5 canvas with rounded corner. I'm using the CSS property border-radius: 15px to round my corners. But, when I draw something in the corner of my canvas, I can draw in the corner. At the beginning: What I have: What I want: Do you have any solution to avoid that? I thought about create a mask but I don't really know how to do.. For information, this works on Firefox but not on Chrome/Safari/Opera. This is a small example: http://jsfiddle.net/XYHpJ/ Thanks! 回答1: Just use

问题 I'd like to have an HTML5 canvas with rounded corner. I'm using the CSS property border-radius: 15px to round my corners. But, when I draw something in the corner of my canvas, I can draw in the corner. At the beginning: What I have: What I want: Do you have any solution to avoid that? I thought about create a mask but I don't really know how to do.. For information, this works on Firefox but not on Chrome/Safari/Opera. This is a small example: http://jsfiddle.net/XYHpJ/ Thanks! 回答1: Just use

问题 I want to cut left top corner of a box using CSS like this. keep in mind that background is transparent. 回答1: Nearly the same solution as OriDrori's answer but more flexible (if you need fixed-width cutted corner). This gradient will look the same regardless of .card width and height . body { background: purple; } .card { width: 200px; height: 200px; background: linear-gradient(135deg, transparent 20px, white 20px); } <div class="card"></div> 回答2: You can use a simple linear gradient for that

问题 I want to cut left top corner of a box using CSS like this. keep in mind that background is transparent. 回答1: Nearly the same solution as OriDrori's answer but more flexible (if you need fixed-width cutted corner). This gradient will look the same regardless of .card width and height . body { background: purple; } .card { width: 200px; height: 200px; background: linear-gradient(135deg, transparent 20px, white 20px); } <div class="card"></div> 回答2: You can use a simple linear gradient for that

问题 I've spent almost a couple of hours to figure it out. However, it did not happen and finally, I had to come here. Two things are required to be achieved : Firstly I'd like to have a spontaneous corner radius at the top (which is basically TopRight & TopLeft) of UITabbar . Secondly, I'd like to have a shadow above those corner radius(shown in below image). Please have a look at below image Let me know if anything further required from my side, I'll surely provide that. Any help will be

问题 I've spent almost a couple of hours to figure it out. However, it did not happen and finally, I had to come here. Two things are required to be achieved : Firstly I'd like to have a spontaneous corner radius at the top (which is basically TopRight & TopLeft) of UITabbar . Secondly, I'd like to have a shadow above those corner radius(shown in below image). Please have a look at below image Let me know if anything further required from my side, I'll surely provide that. Any help will be