| 1 | | I have an idea: Draw a number of lines at the same position in cyan at very low transparency. Starting at 20 px width and each one 2 px thinner than the previous. This should simulate a gradient and you get nice rounded corners. Performance wise, it shouldn't be that much of a problem because there is usually not more than one object highlighted at a time. |
| | 1 | There is another method, demonstrated by the following style: |
| | 2 | {{{ |
| | 3 | way[highlight]::h02, |
| | 4 | way[highlight]::h04, |
| | 5 | way[highlight]::h06, |
| | 6 | way[highlight]::h08, |
| | 7 | way[highlight]::h10, |
| | 8 | way[highlight]::h12 { color: cyan; opacity: 0.08; z-index: -5; } |
| | 9 | |
| | 10 | way[highlight]::h02 { width: +02; } |
| | 11 | way[highlight]::h04 { width: +04; } |
| | 12 | way[highlight]::h06 { width: +06; } |
| | 13 | way[highlight]::h08 { width: +08; } |
| | 14 | way[highlight]::h10 { width: +10; } |
| | 15 | way[highlight]::h12 { width: +12; } |
| | 16 | }}} |
| | 17 | |
| | 18 | This should work better at the corners. |
